I am new in learning CSS3.
I have stuck on the same problem for couple days.
So I am using this tutorial for practice and else.
http://tympanus.net/Tutorials/CSS3Accordion/
And I get familiar with how it works. Now I want to try to combined them with background slider. In short, I want the body background to change (with transition effect, fade in fade out for example), everytime I click on the menu.
For example: About us -> background change to my photo, How we work -> picture of books or something.
I tried to use div to replace the body background to show up independently on top of each other but I just can't get it to work properly.
Can anyone give me basic solution? Thank you!
Related
I'm trying to make a web page formatted similar to that of Netflix. Where a list of videos are displayed in a div with two arrows in either direction on each side. When the number of videos are more than the width of the window clicking the arrows moves the displayed videos in the corresponding direction by one video.
And(key part), when a video is clicked, the clicked video gets displayed on another div(main part of the screen) with a text of introduction and an excerpt of the video playing in the background of that section, plus a "play" button to start the video.
I would probably be able to sort it out with vanilla code. But this page is managed by WordPress so I would have to plug in my code with wordpress.
My assumption is that hacking the existing elementor code for the video widget would be the quickest way to do it. But I don't know how to find the code corresponding to the functionality I need to modify to customize it to do what I want. I can locate the video-widget file, but still, it's a huge file with lots of code. How do I find the functionality I need specifically to import into my own code?
Thank you and sorry for the verbose phrasing.
So this is going to be kinda silly, but I don't like the arrows for Magnific Popup, and I want to use some png arrows that I created, even moreso I don't want them the default way where they are miles apart, and I don't want them to obstruct content (cause I am using Magnific Popup to gallery some ajax). I really want them bound in div/big square buttons on the side of the image (the height of the image as well) like the first example here:
and those big black bars on a tv
I have no idea where the code is to change this, or how to edit the basic construction of the lightbox but I really want to change the arrows (and the x) if someone could direct me to the code where I can do this I will be glad to do it but I feel like I am working blind.
Alternatively, if anyone knows any other lightboxes that allow you to position and design your own arrows and close button, and have a gallery of ajax based items (that is responsive and scrolls) I will gladly switch (I basically want to be behance ha ha)
(also is there anyway we can generate a swipe effect to go through a gallery?)
Feel free to tell me to go to hell if it is impossible :D
Thanks.
I am using LWUIT for series 40 for making my J2ME app and I have noticed a strange behavior of the LWUIT-Dialog while using the showPacked() method, the dialog being positioned with BorderLayout.CENTER.
This happens especially in touch phones.
I have attached an image in order to describe my situation.
Initially the dialog appears as shown in the first part of the image.However,it expands in the next few seconds to become like the one shown in the second part of the image.
Future calls to display the dialog using showPacked appears like the third one.I am clueless as to why this is happening.I want my dialog to appear like the one shown in the first half of the image all the time.Where have I gone wrong?
Note : The content of the Dialog is a an animated label.
I have no idea what the guys did there but I'm guessing they reflow the UI too aggressively. Try setting Dialog.setAutoAdjustDialogSize(false) and see if it solves your problem.
You can remove the title and background et al. with the code below, it makes only your animated GIF show with the dimmed dialog background :
setTitle(" ");
setUIID("Null");
setDialogUIID("Null");
getStyle().setBgTransparency(0);
getSelectedStyle().setBgTransparency(0);
getUnselectedStyle().setBgTransparency(0);
getPressedStyle().setBgTransparency(0);
getDialogStyle().setBgTransparency(0);
I'm having a bit of trouble with custom action buttons in the honeycomb+ action bar. I'm adding a menu item that uses a custom layout (using the android:actionLayout attribute). The reason for the custom layout is that I want a button that has two lines of text that can be updated dynamically.
However, I still want this action button to operate like the other standard buttons. By this I mean that the background fades in when the button is selected, and fades out again if it is unselected, all in the style of the platform (the colour seems to differ between different platforms/devices - I've seen both grey and blue versions)
I've tried using the action button style for the custom layout:
style="#android:style/Widget.ActionButton"
and I've tried setting the background for the custom layout to:
android:background="?android:attr/actionBarItemBackground"
but to no avail, and I'm kind of trying things fairly randomly as I can't find any documentation on how to do this (or if indeed it is even possible).
I know I can approximate this behaviour myself by setting the background, but it would be nice if I could just set the item to behave like a normal action button in terms of how it appears when the user interacts with it.
Anyone have any ideas?
Thanks in advance!
Ah, sorry to answer my own question but I have just stumbled upon a way to do this. I was halfway there - you need your custom layout's style to inherit from ActionButton:
#android:style/Widget.ActionButton
but then you also need to make the layout clickable:
android:clickable="true"
for it to work. Using both of these makes the custom action buttons look just like the regular ones when you press them.
Hopefully that'll help someone trying to do this!
I'm currently working on a flash project, which will use multiple scroll areas.
I'm trying to find out how to create a scroll area like I see on stackoverflow, and make it function similarly.
Whenever someone posts their lines of code to stackoverflow, the scroll area scrollbar looks exactly like the scrollbar in the web browser, and is able to be scrolled with the mousewheel smoothly, without affecting the webpage scrolling.
Example: disable mouse wheel scrolling while cursor over flex app?
Could anyone please explain to me how I can do this in my flash project?
Thanks!!
You wouldn't need flash to do this... This is accomplished using CSS. You would just need to put the portion you wanted to function like that in a div (or any HTML container for that matter) and then define such properties as min-height, max-height, min-width, max-width, overflow, etc. I think there's one that determines the presence of the scroll bars but I don't remember what it is for sure. Very easy to do this and flash would be a bit of overkill.