We are trying to replace a set of four radio buttons with a set of four images, each with its own hover and selected image.
We have sent the radio button off screen using CSS, created the main images to show as the label and also set the hover, but we are experiencing issues with the Javascript/jQuery we are using which adds a 'selected' class to the buttons. It works for the first button, but I am lost on how to replicate this for the other three - your advice on this would be very much appreciated.
The JS Fiddle for this can be seen here:
http://jsfiddle.net/HVk7d/8/
Managed to get it working in the end - here is the code: http://jsfiddle.net/HVk7d/18/
All the best,
Matthew
Related
I'm making portfolio site, where I have a slider for each project and inside it there is second slider for different images.
Sliders working fine but can't make the button "myBabel" disappear when viewing "myBerlin".
Also, I can't add second button to make the "myBerlin" slider work.
I want to add one button that either controls all the inside sliders (the slidshow that contains are controlled by left and right screen buttons) by one button in the middle or one button per inside slider that moves with it.
I tried adding "myBerlin" to the onclick="myBabel();..." but then my sliderscript doesn't work anymore and skips most of my images. I also tried adding the button in the slider itself but doesn't work.
Anyone has a solution? I tried different solutions already.
https://jsfiddle.net/r87dc1j5/
I'm stuck with something and I hope you guys can help me.
I'm using the UniformJS jQuery plugin (http://uniformjs.com) to style the forms (and have made a slight modification to the colours in case you were wondering why it's orange). The dropdown list is being styled perfectly, but the radio buttons are not working correctly.
The initial state is being displayed properly, but none of the other states are showing. For example, when I hover over the button, there is no glow and the radio button does not turn orange when checked.
When the span wrapped around the input by the jQuery is modified in Developer Tools to use the checked class, the radio button displays perfectly! So there doesn't seem to be a problem with my sprite.
Here's an example:
http://jsfiddle.net/5U33b/
Thanks
Try using
<input type='radio' name="test">Test
you missed the name attribute
DEMO
I create a css button with some tutorial jsfiddle.net/EC2Eh/12/ but this is based on
jquery mobile. How to create a similar button just with javascript that will work like that button, and also where I can change a color of button and dimension.
Here on this jsfiddle.net/EC2Eh/12/ I can't change any color, dimension and so. So can you please tell me is there some tutotial to build this button bar (radio button) that will work just like that but where I can change all things.
Thanksa lot!
and sorry abut my english is not very well but I;m leasen hard.
just 3 steps you have to follow:
take 2 divs
adjust height ,width
give the divs rounded border
change color on MouseHover event and onClick event
Download firebug for firefox, right click on the element in the fiddle and copy out all the css for that element and apply it to your button.
I have a div selector script with icons as pagination that I'm working on. So far everything is working well, the question I have is how can I change the active state of a an icon dependent on the div or "page" that is currently being shown. Here is a simple example of what I have so far. The images being used for the navigation right now are clickable as well.
Here is the example:
http://jsfiddle.net/Rua2B/
Thanks for any possible help!
EDIT: Just to clear things up I mainly trying to get active states to change when the "prev" and "next" buttons are hit.
Your code for pagination isn't the most efficient - you should look into tidying this up. But a simple fix for you for next/prev buttons is this line:
$("#pager img").removeClass("active").eq($("#container .boxes:visible").index()).addClass("active");
DEMO: http://jsfiddle.net/Rua2B/1/
I have a div area (for main slider. But there will not be sliding inside).
And under this div area there is a tab system.
In these tabs there are 1-6 images (In each tab there are another images (1 to 6 images)
When I click one of these images I want to show the related content / photo etc in this Div area above.
How can I do that? Any example? Any clue?
I tried to use jquery for show/hide, toggle etc but for example I couldnt find how to keep those big divs unvisible within my html (I tried css "display:none;" but that didn't seem to me wise enough) and call them in its place (above of the tab system)
P.S: when an image is shown the others must be hidden.
Here you are demyr obviously you will have to modify to your exact needs:
http://jsfiddle.net/S4LGr/1/
It is no problem here is the updated code, edit as you need you should really be able to take it from here:
http://jsfiddle.net/S4LGr/3/
I changed the images on this one so you can actuall see it happen, very similiar to ford.ca:
http://jsfiddle.net/S4LGr/5/
Here you go man all the pieces brought together:
http://jsfiddle.net/S4LGr/9/
totallyFeelLikeIdidYourHomeWork lol you owe me a beer!
you can bind a function on all images/text that loads the relevant images/text to the detail div. Like this fiddle: http://jsfiddle.net/9jc46/