Ive got a slider with 3 circles at the bottom, when picture is displayed, the correct circle background must be turned to green, correlating to the correct image. Ive got it working, but when user clicks on a new circle, to change image, the old background color remains in place and does not disappear, as you can see from the picture example.
In the above example, the page loaded with the middel image highlighted, when user clicked the right circle the image changed, and highlighted the right circle (as it should) BUT the middle buttons highlight color remained in place...What am I missing here? Code follows:
$(document).ready(function(){
$("a").click(function(){
$("iLink").removeClass()
$(this).addClass("over")
}) ;
});
.over {
background:#008000;
}
<img id="i1" src="images/dot.png"/>
<img id="i2" src="images/dot.png" />
<img id="i3" src="images/dot.png" />
what is iLink?
$("iLink").removeClass()
change to
$('a').removeClass()
why need different class?
select that id and associate condition which one id is going to be selected than use css property of jquery or css function.
Change
$("iLink").removeClass()
to
$("a[class^='iLink']").removeClass()
because the a tags contains different classes but they all start with same name iLink
Related
So, I have this project to do for school and and partially got my answer from Reveal image underneath a mask css/javascript which is awesome.
The thing is, I do not want the color to move when I point my mouse over to the glass. Instead, what if I have 5 small thumbnails of different colors (listing on the side of the glass), which when I point to each of them, that would be the color moving in the glass. Is that possible? Would someone help me please.
Thank you very much!
Basically you need to change the color of the div that is the water "animation". Which you can easily do with $("div").css("background-color", color); that is attached to events on some display objects (5 small thumbnails in your case).
Here is a small example # JSFiddle: http://jsfiddle.net/MartinTale/Mz6VH/1/
As Martin said, you can simply change the background color based upon what you are hovering. However this can be slightly problematic if you then hover over a different color (the color will then switch before finishing the animation).
If you have some markup like this:
<img src='http://www.videsignz.com/testing/images/water-front2.png' />
<div id="blue-fill"></div>
<div id="red-fill"></div>
<div id="green-fill"></div>
<div class="thumbnails">
<div id="blue"></div>
<div id="red"></div>
<div id="green"></div>
</div>
And you can use this line of jQuery in your function to get the corresponding element
var theFill = "#" + $(this).attr("id") + "-fill";
This is basically grabbing the id of the current hovered element and concatenating on the format of your fill selector.
You can then grab select your fill using
$(theFill)
and animate from there. I made a codepen example with class attributes and the required css for styling: http://codepen.io/prythm/pen/Lwoyd
In my page i want to display a list of black&white images in grid view, when i hover the mouse over this image it displays the color image. When i move the mouse away, again the black&white image should be shown.
When i clicked a particular image (i.e- a black&white image) it should be turned to a color image at the same time in addition to this a tick mark image should be added.
I used the following script and html code
SCRIPT
$(".swap_image").live('click', function() {
if($(this).attr("class") == "swap_image") {
this.src = this.src.replace("_blackwhite", "_color");
$('#tick_' + $(this).attr('rel')).show();
} else {
this.src = this.src.replace("_color", "_blackwhite");
$('#tick_' + $(this).attr('rel')).hide();
}
$(this).toggleClass("color");
return false;});
HTML
<img id="tick_{{img.id}}" src="{{MEDIA_URL}}img/tick.png" style="position:absolute;" ><img rel="{{img.id}}" src="{{MEDIA_URL}}{{ img.logo_blackwhite }}" onmouseover="this.src='{{MEDIA_URL}}{{ img.logo_color }}'" onmouseout="this.src='{{MEDIA_URL}}{{ img.logo_blackwhite }}'" class="swap_image" />
I used the above code, all works fine but when i move the mouse out again the image turns black&white image (because i used mouseout function)
Is there any other better idea available? or
How to overcome from this issue? Thanks in Advance
I would suggest adding a class to the image when you click. Then when the mouseout function execute, simply include an if/then that only swaps the image back to black and white if the class is NOT present.
When you click the Image Then Leave some Footprint there. Like change the Class of the Image,
now in your mouseout function check the condition if the image has that particular class or not. If there do nothing, else change the image color.
look I have this question, how can i do something like this (look at images)
I think it's possible to do with jQuery or ajax, but i don't know how..
i have page something like this :
when i click on 1st green cube slides up one #div container at the bottom of page :
when i click on red 1st cude #div container at the bottom of page slides down :
but when i click for example (on image 2) at the green cube #div container at the bottom slides down and up with new information abou title 2.
I hope so you will help me with this..
And one more thing, when i click o green cube it color chancing to red, and when i click on red cube it's changes back to green.
I don't know if this is exactly what you need, but I did a quick solution in this fiddle:
http://jsfiddle.net/8Z66Y/3/
If you click in the squares the bottom bar slides up and down, the only thing that is missing is the text, you could do that using the data attribute in every div and setting it to the bar innerHTML.
If the example is in the right track tell me and I'll add the data if you need it, but I don't know if you need to retrieve the data from somewhere else
You just have to write in the second green's jquery code that hide first green's bar, and do the opposite for the first green's jquery code.
like:
$("first").click(function(){
$("second").hide();
$("first").toggle();
});
$("second").click(function(){
$("first").hide();
$("second").toggle();
});
I don't understand why the background color is not being applied as expected here. This might be a lack of understanding on my part as to the relationships between elements in CSS?
The page in question: http://www.preview.imageworkshop.com/portfolio/
Replicating the issue
First, open the above link in IE 7 or IE 8
Click the PRODUCT filter, then press the PROMO & EDITORIAL filter
White dots will have appeared on some of the images (this is a bug in IE which causes some pixels to be left transparent after a fade animation. if you don't see them, do a little more filtering, they turn up fairly quickly.
CSS BACKGROUND COLOR PROBLEM
What works:
If I set the background color for the gallery background to be red, then this red color shows throught the transparent spots on the images. (The inference here, is that a background color of black hides the 'white spots' bug).
#isotopegallery{background:red;}
What doesn't work:
Obviously, I don't want to set the gallery background color to be anything but white.
What I want to do is set the background color of the DIV that contains the images, for example:
.photo{background:red;}
however, when i do this, the red background color does not show up through the transparent pixels??
The simplified overview of the structure of the elements is as follows
<div id="isotopegallery" class="photos">
<div id="ngg-gallery-18-71">
<div class="photo"> <p><a> <img /> </a></p> </div>
<div class="photo"> <p><a> <img /> </a></p> </div>
<div class="photo"> <p><a> <img /> </a></p> </div>
<div class="photo"> <p><a> <img /> </a></p> </div>
</div>
</div>
HELP!
I can't figure out why this background color works for the #isotopegallery parent DIV, but not for the .photo DIV?
When i look in firebug, the color property is set for the .photo div, but does not show through the transparent pixels?
This is the last issue that his holding up go live for our website, and it is driving me nuts!
I would really appreciate any help that you can provide to help me resolve this issue.
NOTE: there is info around that suggests that changing the blackpoint of the images in photoshop will fix this problem. We have tried this method, and have found it does not work.
Are you floating the interior elements of .photo without clearing them? That would prevent the background color from covering the height of the element in question.
If that's the case, appending something like <br style='clear: both;' /> to the .photo div should do the trick.
Likewise, you could always try applying the background color to the img elements themselves: .photo img { background-color: red;}
The creator of isotope has been helping me look at this issue, and has added the following comment:
"Did some more testing. I've come to the conclusion IE treats the
entire element, which contains the image, as one 'image'. Whatever is
visible gets flattened. If that element has a true-black pixel within
an image, than that pixel of the element will be treated as
transparent, regardless of what's actually behind the image.
Take a look at: http://support.metafizzy.co/2011/09-06-ie-trans.html
You'll see a couple transparent pixels pop up, even though the
background of each item is clearly red (items have padding, background
is red). I then dynamically changed their color to blue and the pixel
is still transparent.
Which means the only pure-CSS solution is to set the container
background to black"
Not sure where to go from here. We have tried moving the black point (as this is supposed to be caused by true black pixels), but have found this to be an unsucessful method.
I found a solution to this issue. I have posted full details against this thread (link below), which describes the issue in more detail.
IE fade causing white spots on images
I have a thumbnail image that when you click it changes a larger image on the page. So far I have the Javascript figured out for passing on the .src, .alt, and .title information that makes the picture and tool tip of the picture change.
The large picture has a caption underneath. I was wondering how to also have the caption change when the thumbnail is clicked. I'm assuming I can change it into some sort of Javascript variable but this is my first time using JS so I am still very green.
One way is to have the caption in a container with an ID, and overwrite the innerHTML of that container. i.e.
<div id="myCaption">People of Walmart</div>
<script type=text/javascript>
document.getElementById('myCaption').innerHTML = 'Whoa!';
</script>
If your caption has an ID you can select that caption and add the text through JS:
document.getElementById('id_of_the_caption').innerHTML = "Text to display";
Use that JS code in your function that changes the image.