I have created script which dynamically change the product image on click event but i need to add zooming feature on Big Image when mouse move on big Image.
HTML code
<ul class="thumbelina" style="top: -220px;">
<li style="display: block;">
<img class="showBigImage" src="/Chrysanthemum-69x52.jpg" data-fullurl="/Chrysanthemum.jpg">
</li>
<li style="display: block;">
<img class="showBigImage" src="/Lighthouse-69x52.jpg" data-fullurl="/Lighthouse.jpg">
</li>
<li style="display: block;">
<img class="showBigImage" src="/Penguins-69x52.jpg" data-fullurl="/Penguins.jpg">
</li>
</ul>
<div>
<img class="bigImage" src="/Penguins.jpg" />
</div>
JavaScript
$(".showBigImage").click(function(){
var FullImageUrl = $(this).data("fullurl");
$(".bigImage").attr("src", FullImageUrl);
});
onfocus -> animate to new height and width,
is this what you want to reach? i could not give a better answer because the question was a little unclear to me. if you want a better answer please expand your question for me
Related
I have some questions about jQuery animations.
But first, This is what I have currently. http://jsfiddle.net/ssmm0714/00vkoopn/
<div id="container">
<ul class="app-lst">
<li class="item-6">
</li>
<li class="item-7">
<a href="#">
<div class="icon closed"><img src="http://s27.postimg.org/5mixcx1j3/arrow.png" alt="arrow" class="arrow-img"></div>
</a>
</li>
<li class="item-8">
<a href="#">
</a>
</li>
</ul>
</div>
I would like the green div to slide with bouncing effect (like easeOutBounce) and push the yellow div out until only the green div's arrow is shown, and the contents of the green div will appear.
(It's like a sliding card effect?)
Currently, I made it so that the arrow spins on click.
Could someone help me with coming up with the desired effect? I tried doing a slide on both, but I do not know how to stop it when the blue div hits the arrow.
Also, as a side question, is it a good practice to put all widths of each divs in percentage form? I did this because this is going to be a mobile web app, and wanted to make it responsive.
Anyways, for reference,
This is the mock up of what I want it to look like after.
http://jsfiddle.net/ssmm0714/9q04nz0d/
<div id="container">
<ul class="app-lst">
<li class="item-6">
</li>
<li class="item-7">
<a href="#">
<div class="icon closed"><img src="http://s27.postimg.org/5mixcx1j3/arrow.png" alt="arrow" class="arrow-img"></div>
<span> I AM THE HIDDEN TEXT! (loaded different HTML file) </span>
</a>
</li>
<li class="item-8">
<a href="#">
</a>
</li>
</ul>
</div>
To add the bouncing effect you will need the jquery-ui lib.
Next thing - you want both the yellow div and the green div to have the same effect (for the hide and show) and the effect should work the same time.
$('li.item-6').animate({'width' :'0'}, 2000, 'easeOutBounce');
$('li.item-7').animate({'width' :'100%'}, 2000, 'easeOutBounce');
Check out this fiddle: http://jsfiddle.net/w84btwsf/1/
Note that I added some workaround to handle small screens and problems with percentages (you can see it in the top of the js part).
Regarding your question about percentages - yes, this is indeed a good practice. You can also use one the the many css-frameworks that helps with developing responsive layouts (bootstrap is one of them).
I'm trying to figure out if it's possible (and if so how) to change a link's color by polling the title attribute. I'm working with an HTML page that is generated from another script that creates a accordion list of hyperlinks. A couple of those hyperlinks I'd like to highlight, and I believe I can shoehorn in some JavaScript to do this (and the title attribute is the only unique element I can rely on), but I'm not sure how to write it. Here's what a bit of the list page looks like:
<div class="AccordionPanel AccordionPanelOpen">
<div class="AccordionPanelTab">
Forms
</div>
<div class="AccordionPanelContent" style="height: auto; display: block;">
<ul class="arrows searchSubtype">
<li class="">
<a title="Form-1.doc" target="_top" href="../Form-1.doc">
Form 1
</a>
</li>
<li class="">
<a title="Form-2.doc" target="_top" href="../Form-2.doc">
Form 2
</a>
</li>
<li class="">
<a title="Form-3.doc" target="_top" href="../Form-3.doc">
Form 3
</a>
</li>
<li class="">
<a title="Form-4.docx" target="_top" href="../Form-4.docx">
Form 4
</a>
</li>
</ul>
</div>
</div>
Sure, use the attribute selector:
$("a[title='Form-4.docx']").css("color","red");
I have a simple bootstrap grid defined: jsFiddle
The problem is in bootstrap, we define grid like
<div class="row">
<div class="col-md-4">
...
But in flexslider2 we need to wrap into li, e.g.
<div class="flexslider">
<ul class="slides">
<li>
<img src="slide1.jpg" />
</li>
But I want to retain to the use of bootstrap grid as it is responsive and position more easy to control. So, it is possible to remain my grid but to apply flexslide onto it?
I.e. in the flddle, I want 4 & 5 to be hidden at the beginning.
I don't know if this is what you are after, but actually FlexSlider has a "selector" option that allows you to wrap your slides into any element you want:
jsFiddle
$('.flexslider').flexslider({
selector: ".slides > div.col-md-4"
});
Anyway, maybe Bootstrap styles will interfere with Flexslider (because Flexslider sets the width of the slides when it loads), so not sure if this is a good idea. Probably it's easier to define specific styles for the slides.
I don't see the problem you are encountering, but i have updated your jsfiddle.
You should place the whole flexslider into the column:
<div class="row">
<div class="col-md-4">
<div class="flexslider">
<ul class="slides">
<li>
<img ... />
</li>
<li>
<img ... />
</li>
<li>
<img ... />
</li>
</ul>
</div>
</div>
</div>
I have made on the basis of the script BxSlider slider on its website.
Structure slider is as such:
<ul class="slider-cont">
<li>
<img src="images/slide-1.jpg" alt="">
<div class="caption">caption1.</div>
</li>
<li>
<img src="images/slide-2.jpg" alt="">
<div class="caption">caption2</div>
</li>
<li>
<img src="images/slide-3.jpg" alt="">
<div class="caption">caption3</div>
</li>
</ul>
Caption is over the image and is the way to the left of the slider. My question is whether it is possible using CSS3 or JS to do the same animation to make the text more quickly, "rolling off" and "rode" than the picture? I tried using the tool in the bxslider. OnSlideBefore or OnSlideAfter but I managed to get this effect.
I know this is a real newbie question, but that's what I am! I've been playing with ajax, and I have these two images swapping when I press the two buttons.
Question: How do I make the button have the active state displaying while it's corrisponding image is displaying?
I'm sure I need to do something like set an id on the image, but other than that, I'm not sure...
My code (I'm not displaying the ajax stuff that is making the image swap, because I doubt you need that too):
<div class="wrapper">
<div class="transcriptionbuttons">
<ul class="transcript">
<li class="transcript"><a class="transcriptionhorbutton" href="javascript:void()" onclick="getDataReturnText('/lessons/transcriptions/ajaxcalls/L1horizontal.txt', callback)"></a></li>
<li class="transcript"><a class="transcriptionvertbutton" href="javascript:void()" onclick="getDataReturnText('/lessons/transcriptions/ajaxcalls/L1vertical.txt', callback)""></a></li>
</ul>
</div>
<div class="transcriptimage" id="targetDiv">
<img src="this gets populated with ajax..." alt="">
</div>
</div>
Thank you!
Joel
Edit:
Sorry it wasn't clear. The list items are buttons. Click a list item, and it loads an image in targetDiv. I want the button that is "active" to remain active.
If I understood the question.... you could, for example,
<img id="targetImg" src="this gets populated with ajax..." alt="">
and in your JavaScript callback
document.getElementById("targetImg").setAttribute("src", "new_image_source.jpg");
EDIT
If instead you meant you wanted to change the <a> tag when clicked, you could...
<li class="transcript">
<a class="transcriptionhorbutton"
href="javascript:void()"
onclick="getDataReturnText('/lessons/transcriptions/ajaxcalls/L1horizontal.txt', callback);make_active(this);"></a>
</li>
and pass this into a function which will make the changes you want (admittedly that part is a little unclear)
EDIT 2
<li class="transcript">
<a id="transcriptionhorbutton" class="inactive"
href="javascript:void()"
onclick="getDataReturnText('/lessons/transcriptions/ajaxcalls/L1horizontal.txt', callback);make_active(this);"></a>
</li>
<li class="transcript">
<a id="transcriptionvertbutton" class="inactive"
href="javascript:void()"
onclick="getDataReturnText('/lessons/transcriptions/ajaxcalls/L1vertical.txt', callback);make_active(this);"></a>
</li>
<script>
var buttons = [ document.getElementById("transcriptionvertbutton"),
document.getElementById("transcriptionhorbutton")];
function make_active(el) {
deactivate_buttons();
el.setAttribute("class","active");
}
function deactivate_buttons() {
buttons[0].setAttribute("class","inactive");
buttons[1].setAttribute("class","inactive");
}
</script>
It's not the prettiest solution, but it should give you an idea of how the problem can be solved