So I have browsed all over, including these posts:
Jquery change image on click
JQuery - how can I change an image src on click of a link
http://www.kirupa.com/forum/showthread.php?301972-Swap-image-on-click-Anyone
and other links as well and I guess I don't understand how it works and can't get it to work.
Here is what I have so far:
HTML:
<div style="width:475px; height:230px; background-color:#c1bfbf;">
<div style="width:450px; height:220px; position:relative; overflow:hidden; float:left;">
<ul style="width:450px; height:220px; list-style:none; padding:0px; border:0px; margin:0px; position:relative; float:left;">
<li id="first" style="padding:0px; border:0px; margin:0px;"><img src="images/imagegraph2.png" /></li>
<li id="second" style="padding:0px; border:0px; margin:0px;"><img src="images/imagegraph1.png" /></li>
</ul>
</div>
<div style="width:25px; height:110px; position:relative; float:left;">
<img src="images/2nd.png" />
</div>
<div style="width:25px; height:110px; position:relative; float:left;">
<img src="images/1st.png" />
</div>
</div>
This code works using anchor tags, but the problem is it pulls the page down to the anchor which I don't want. So I moved on to jQuery and image swaps. I've implementing other peoples codes to see if they work and I can't get them to work. I've used this jQuery code:
$(function () {
$('.menulink').click(function () {
$("#bg").attr('src', "images/imagegraph1.png");
return false;
});
});
Matched up with this HTML:
switch me
<img src="images/imagegraph2.png" id="bg" />
And all that happens is the showing of imagegraph2.png and not the switching of imagegraph1.png. Usually when you do and then hit the "=" sign, a list of possible links comes up for your image. When its in Javascript, it doesn't do that, you just put what folder/name of file. So I'm sure I'll get some negative votes here, but I have exhausted all avenue's to get this to work.
Try e.preventDefault();
$(function () {
$('.menulink').click(function (e) {
e.preventDefault();
$("#bg").attr('src', "images/imagegraph1.png");
});
});
Related
I'd like to make it so that when users hover over a picture on my website, they get a grey box the same size as the picture, and inside the grey box is a list; each of the items on the list link to a different site. I don't know how to do this; I can only find tutorials on how to replace images with other images when users hover over them. I don't want that; I want to replace the image with a box that itself contains multiple links. I don't need a specific answer so much as a general idea about how this can be done. How do you developers do this?
What may make this more complicated is that I would like to line up three pictures just like this in a horizontal row; for each picture, users can hover over them and then click on an item in the list.
(I'm new to html and css, and I'm willing to use JavaScript if that's the best solution. Thank you in advance for your help!)
Here is the html:
<div id="container">
<img id="image"/>
<div id="overlay">
Link 1<br>
Link 2<br>
Link 3<br>
</div>
</div>
Here is the css:
#container {
position:relative;
width:100px;
height:100px;
}
#image {
position:absolute;
width:100%;
height: 100%;
background:black;//should be url of your image
}
#overlay {
position:absolute;
width:100%;
height:100%;
background:gray;
opacity:0;
}
#overlay:hover {
opacity:1;
}
JsFiddle link
On wrapper hover,just show the div containing the lists else it should be hidden.Here is the working example.
HTML
<div class="wrapper">
<img src="http://www.gettyimages.in/gi-resources/images/Embed/new/embed2.jpg" class="showDiv" width="200px" height="200px" alt="image" />
<div class="showOnHover">
<ul>
<li>
link1
</li>
<li>
link2
</li>
<li>
link3
</li>
</ul>
</div>
</div>
CSS
.wrapper{
position:relative;
width:200px;
}
.wrapper:hover .showOnHover{
display:block !important;
}
.showOnHover{
display:none;
position:absolute;
top:0;
height:100%;
}
I want to change the background image of one div when the mouse is over a different div, using jQuery.
jQuery(function() {
jQuery('.linktomouseover').mouseover(function() {
$(.linktomouseover2).css('background-image', "url('test.jpg')");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="linktomouseover">
<a class="nthn">link1</a>
</div>
<div class="linktomouseover2">
<a class="test">link2</a>
</div>
So when mouse is over div with class linktomouseover it will actually change the background of div with class linktomouseover2
this does not seem to work. please help?
You're missing quotes in the code jQuery(.linktomouseover)
This is the correct code
jQuery(function() {
jQuery(".linktomouseover").mouseover(function() {
jQuery(".linktomouseover2").css('background-image', "url('test.jpg')");
});
});
DEMO
this is a mistake on your code.
jQuery:
jQuery('.linktomouseover2').mouseover(function() {
$('.linktomouseover').css('background-image', "url('http://cdn.androidpolice.com/wp-content/uploads/2012/11/nexusae0_wallpaper_01.jpg')");
});
HTML:
<div class="linktomouseover">
<a class="nthn">link1</a>
</div>
<div class="linktomouseover2">
<a class="test">link2</a>
</div>
CSS:
.linktomouseover{
position:relative;
display:block;
width:100%;
background:#e7e7e7;
height:200px;
}
.linktomouseover2{
position:relative;
display:block;
width:100%;
background:#d7d7d7;
height:200px;
}
Live Demo On JSFiddle
I am trying to create a slider but discovered that if a user were to use CTRL+F, the position and the <div> element's offset changed and so the slider no longer works the way is should.
HTML:
<div style="width:100px; height:150px;">
<div style="width:100px; height:100px; overflow:hidden;">
<div id="slider" style="width:200px; height:100px; right:0; position:relative;">
<div style="width:100px; height:100px; float:left;">visible</div>
<div style="width:100px; height:100px; float:left;">hidden</div>
</div>
</div>
<input id="sliderbuttonprev" type="button" style="float:left;" value="Prev">
<input id="sliderbuttonnext" type="button" style="float:right;" value="Next">
</div>
JavaScript (jQuery):
$(document).ready(function() {
$("#sliderbuttonnext").click(function(){
$("#slider").animate({right:"+=100px"});
});
$("#sliderbuttonprev").click(function(){
$("#slider").animate({right:"-=100px"});
});
});
Is there a way to stop CTRL+ F finding the hidden sections?
jsFiddle Demo
You cannot prevent browsers from finding hidden content, but you could potentially disable it for the slides.
For example, if you specify the content within CSS, the browser won't move the content. For example, see here > Is it possible to disable Ctrl + F of find in page?
<div class="word-foobar"></div>
.word-foobar:before {
content: "Foobar";
}
As nickf has suggested, you could easily write some JavaScript code to convert actual text to this method.
http://jsfiddle.net/TaZL2/2/
If you change your animation to marginLeft instead of the right property, the content doesn't seem to scroll when searching. (Chrome/Mac OSX)
However, a user would still see there was a match and be stumped as to where it could be.
$("#sliderbuttonnext").click(function () {
$("#slider").animate({
marginLeft: "-=100px"
});
});
$("#sliderbuttonprev").click(function () {
$("#slider").animate({
marginLeft: "+=100px"
});
});
i came up with a solution that uses a variable to track the position of the main wrapping div and hides ".hide()" the content div that's not visible. hidden content is not visible to ctrl f.
HTML:
<div style="width:100px; height:150px;">
<div style="width:100px; height:100px; overflow:hidden;">
<div id="slider" style="width:200px; height:100px; right:0; position:relative;">
<div style="width:100px; height:100px; float:left;">
<div id="id1">visible</div>
</div>
<div style="width:100px; height:100px; float:left;">
<div id="id2">hidden</div>
</div>
</div>
</div>
<input id="sliderbuttonprev" type="button" style="float:left;" value="Prev">
<input id="sliderbuttonnext" type="button" style="float:right;" value="Next">
JQuery
<script>
var pos = 0;
function showfunct(x){
if(x==0)$("#id1").show();
if(x==100)$("#id2").show();
}
function hidefunct(x){
if(!(x==0))$("#id1").hide();
if(!(x==100))$("#id2").hide();
}
showfunct(pos);
hidefunct(pos);
$(document).ready(function() {
$("#sliderbuttonnext").click(function(){
pos+=100;
showfunct(pos);
$("#slider").animate({right:"+=100px"});
$("#slider").promise().done(function(){
hidefunct(pos);
});
});
$("#sliderbuttonprev").click(function(){
pos-=100;
showfunct(pos);
$("#slider").animate({right:"-=100px"});
$("#slider").promise().done(function(){
hidefunct(pos);
});
});
});
</script>
I have a large image, and a bunch of divs that I'm using as fake buttons on top of said image. Currently, I'm using absolute positioning to place the divs where I want them to be, but I've got a lot of divs, and finding the x/y coords by trial and error is time I don't want to take. Is there an easier way to position them, or am I stuck?
I'm using jQuery and Javascript in this project, so these can be used for solutions.
CSS:
#test0 {
position:absolute;
left:381px;
bottom:100px;
}
HTML:
<div id="image">
<div id="test0" class="button" onclick="$('#modal').dialog('open');" style="postion:absolute">
Click me to test Modal!
</div>
<div id="test1" class="button" onclick="$('#modal').dialog('open');" style="postion:absolute">
Click me to test the same Modal!
</div>
<img src="testImage.jpg" alt="testtest" />
</div>
HTML:
<div id="image">
<div id="container-of-fake-divs">
<div class="fake-div">FAKE DIV</div>
<div class="fake-div">FAKE DIV</div>
</div>
<img src="image.jpg" />
</div>
STYLE:
#image { position:relative; }
#container-of-fake-divs { position:absolute; top:0; left:0; }
.fake-div { display:block; }
How can I toggle two images by fading using jQuery .fadeToggle method.
You must put the 2 elements you want to crossfade one on top of the other by using position:absolute;. You begin by hiding one. To make a crossfade, you just run simultaneously a fadeToggle() on each of the 2 elements.
The HTML:
<div id="d1" style="background-color:red;"></div>
<div id="d2" style="background-color:blue;"></div>
<span>Click</span>
The CSS:
#d1, #d2 {position:absolute;
top:12px;
left:12px;
width:120px;
height:120px;}
span {position:absolute;
top:200px;
left:12px;
cursor:pointer;}
The Javascript:
$(document).ready(function(){
$("#d1").show();
$("#d2").hide();
$("span").click(function(){ // For demo's sake we attach the crossFade to a click event.
$("#d1").fadeToggle(500);
$("#d2").fadeToggle(500);
});
});
Is this what you're trying to do? http://jsfiddle.net/U5GSy/
Here's the code in the fiddle
$(function(){
$("input:button").click(function(){
$(".cat").fadeToggle("fast");
});
});
<img id="cat1" class="cat" src="http://www.crystalinks.com/catop.jpg" alt="" />
<img id="cat2" class="cat" src="http://blindgossip.com/wp-content/uploads/2010/11/cat-claw-1.jpg" alt="" />
<br />
<input type="button" value="Go Kitty Go" />
#cat1 {
position:absolute;
top:0;
left:0;
}
#cat2 {
display:none;
position:absolute;
top:0;
left:0;
}
input {
position:absolute;
top: 220px;
}
Use fadeToggle twice. This will toggle between 3 images. just set imgno to change it. And also remember that this should be greater than the sources in src array.
<script src="jquery.js"></script>
<body>
<div id="hold"><img src="img1" />Hold</div>
<script>
var src= ['src1', 'src2', 'src3'];
var count=0;
var imgno=3;
$("#hold").click(
function (){
$(this).fadeToggle("fast",
function (){
$(this).find('img').attr('src', src[++count%imgno]);
$(this).fadeToggle("fast", function (){ return true; });
}
)
}
)
</script>