i need to give popup for all the images displayed under a div
i tried to add div before and after image tag but its not appending properly
this is my following code
<div class="description">
<img alt="" src="image.jpg" style="height:350px; width:700px" id="imagepopup0"></div>
Expected output
<div class="description">
<div class="fancybox"> //class to be added
<img alt="" src="image.jpg" style="height:350px; width:700px" id="imagepopup0">
</div> // div to be added
</div>
You can use some JQuery for this, but you have to change the html code a bit.
See snippet
$('.imagepopup0').click(function() {
$('.outer').toggle('show');
$('.fancybox').toggle('show');
});
/* Not needed, just for show */
.fancybox {
background-color: blue;
}
.description {
background-color: red;
padding: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="description">
<img src="http://www.jamfoo.com/chat/smiley.png" class="imagepopup0 outer">
<div class="fancybox" style="display: none;">
<img src="http://www.jamfoo.com/chat/smiley.png" class="imagepopup0">
</div>
</div>
JSFiddle
Original answer: jquery, wrap elements inside a div
Could use the .wrapAll() method:
$('#imagepopup0').wrapAll('<div class="fancybox"></div>');
The wrapAll() method will wrap all the elements matched into another element whereas the .wrap() method which wraps the matched elements individually.
Thank you for your suggestion friends i have found a simple solution for that instead of using div i user a tag and fancy box in it
the following code working fine for me
$("#imgid").wrap('<a class ="fancybox" data-fancybox-group="gallery" href="'+srcimg+'" />');
<script type="text/javascript">
// FANCYBOX JS
$(document).ready(function(){
$(".fancybox").fancybox({
// openEffect: "none",
// closeEffect: "none"
});
});
</script>
Related
I have a big problem and I cant find the solution...
I must do the tooltip, for example we have this structure:
<body>
**<div class="tooltip">Long text ...</div>**
<div style="overflow:hidden">
<div class="box">
**<h1>Short text</h1>**
</div>
</div>
</body>
And if I am on h1 I want add to div with class tooltip visibility:visible, how can I do this?
I hope you find the solution to this problem.
You can use jquery .hover() for as h1 and .prepend() for adding div with class .tooltip and visibility: visible something like below
$('h1').hover(function() {
var tooltip = document.getElementsByClassName('tooltip');
if(!tooltip[0]) {
$('body')
.prepend('<div class="tooltip" style="visibility:visible;">Long text ...</div>');
}
});
.tooltip {
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
****
<div style="overflow:hidden">
<div class="box">
**<h1>Short text</h1>**
</div>
</div>
</body>
Hope this will help you in some way(y).
Since your tooltip isn't a parent of the h1 you've to go up two levels then get the previous element with the class tooltip :
$('h1').parent().parent().prev('.tooltip').css({'visibility':'visible'});
You could use hover() method to toggle the visibility :
$('h1').hover(function(){
$(this).parent().parent().prev('.tooltip').css({'visibility':'visible'});
},function(){
$(this).parent().parent().prev('.tooltip').css({'visibility':'hidden'});
})
Hope this helps.
$('h1').hover(function(){
$(this).parent().parent().prev('.tooltip').css({'visibility':'visible'});
},function(){
$(this).parent().parent().prev('.tooltip').css({'visibility':'hidden'});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tooltip" style="visibility:hidden">Long text ...</div>
<div style="overflow:hidden">
<div class="box">
<h1>Short text</h1>
</div>
</div>
When you hover to H1 and you want to add tooltip to the grand parent this will be the answer.
$('.box h1').mouseenter(function() {
$(this.parentNode.parentNode.previousElementSibling).addClass('tooltip');
});
//2nd option
$('.box h1').mouseenter(function() {
$(this.parentNode.parentNode.previousElementSibling).css('visibility', 'visible');
});
Read this to know what target you want to use the event/script W3schools.com
I have a page that can have a variable number of <div> the idea is people can click the + symbol which is an <img> then the div that is linked to the img tag will display.
I currently have:
PHP/HTML
$plus = '<img src="images/plus.png" class="clickme" width="20px" height="20px">';
$table .= '<div>'.$plus.'</div>';
$hidden .= '<div class"diary">-Content-</div>';
JS
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$( ".clickme" ).click(function() {
$( ".diary" ).slideToggle( "slow", function() {
});
});
});
</script>
This obviously opens all divs and not just the one that is clicked on. I have looked at other similar questions on here and have tried a number of variations such as:
$(document).ready(function(){
$(".clickme").click(function(){
$(this).next(".diary").toggle();
});
});
However, when I try these it just stops working altogether. i.e. none of the divs slide up or down. I see the examples work on JS Fiddle but as soon as i apply it to my page I get nothing.
I am possibly doing something really dumb for it not to work but can't see what.
thanks for any help.
The HTML output should look like
<div>
<div>
<table>
<img class="clickme">
</table>
</div>
<div class="diary">
<table> content </table>
</div>
<div>
(based on tht HTML provided)
Best way would be to add an attribute with matching indexes to both elements
<div>test toggle
<div class="clickme" data-index="1">click me</div>
<div class="toggle" id="obj_1">toggled field</div>
</div>
and then in the JQuery:
$(function () {
$(".clickme").click(function () {
//get number from clicked element's attribute
var index =$(this).attr('data-index');
//select element with id that matches index and toggle
$('#obj_'+index).toggle();
});
})
After looking at your code, i can see that the slideToggle call is maded on .diary class which is probably applied on each of your elements.
I suggest you to put your diary div inside the $plus div then use jquery children or simply give your .diary divs a unique id and use the id attribute for your
toggle.
EDIT:
Here is a simple html output:
<div class="clickme">
<div class="diary">CONTENT HERE</div>
</div>
Add this in the CSS:
.clickme {
background: url('images/plus.png') no-repeat top left;
min-width: 20px;
min-height: 20px;
cursor: pointer;
}
Script tag:
<script>
$(function() {
$(".clickme").click(function() {
$(this).children().slideToggle("slow");
});
});
</script>
Note that i'd let the diary class for your usage and styling purpose but it's not used anywhere.
i'm trying to use jQuery to add/remove a class to an element but I only want to target the '.content' class that is directly above the '.trigger' essentially making each work independently of each other.
Any ideas on the best way to do this?
Thanks in advance
HTML
<div class="instance">
<span class="content showHide">this is hidden</span>
trigger
</div>
<br />
<div class="instance">
<span class="content showHide">this is hidden</span>
trigger
</div>
<br />
<div class="instance">
<span class="content showHide">this is hidden</span>
trigger
</div>
CSS
<style type="text/css">
.showHide{
display: none;
}
</style>
JS
<script type="text/javascript">
$(document).ready(function(){
$('.instance a.trigger').click(function(){
$('span.content').toggleClass('showHide');
});
});
</script>
Try using .prev() that will only target the .content element which is a immediately preceding sibling of your .trigger element:
$(document).ready(function(){
$('.instance a.trigger').click(function(){
$(this).prev('span.content').toggleClass('showHide');
});
});
You could also use siblings(). It will only target everything in the same container
$(document).ready(function(){
$('.instance a.trigger').click(function(){
$(this).siblings('span.content').toggleClass('showHide');
});
});
Fiddle
This method will allow the .content to be anywhere in the container, whether it is before or after the .trigger
Right now I have .clrChart hidden and want to unhide with click on .color but have multiple of these in a row so I need to target the one under the click.
<div class="color">
<a><img src="img/clrBttn.png" alt="" /></a>
<img src="img/clrChart2.jpg" alt="color chart" class="clrChart" />
</div>
I have tried this w/ no avail.
$('.color').click(function() {
$(this).next('.clrChart').show();
});
any help would be greatly appreciated:)
Use .find() instead of .next()
$('.color').click(function() {
$(this).find('.clrChart').show();
});
This will find a descendant inside the current .color
I'm trying to change two (preview) div elements with mouseover on a button-image with a link.
One of the preview-divs will show an image, which I would like to have linked to a specific site
The button-image also has a mouseover function class in CSS.
I might add that there will be multiple images to use this function, each spaced with an own div and a class, which i believe isn't semantically correct as it should be when using an usorted list (but that i will worry about later)
Also I'd like to add I'm new to scripting but eager to learn.
On mouseout or click is not important, the current (preview) contents may remain as on last mouseover.
Currently the changing of the preview divs content works by adding document.getElementById to the anchor and the img separately to each button as stated in the following messy code , but i am looking for a cleaner approach like something with javascript or jquery and using vars and making the preview image clickable and linked to the previewed site
[EDIT:]This code DOES work for making the preview image a link[/EDIT]
It would be really great if i could load each preview image and text from an external file
<div class="btn">
<a href="http://www.previewed_site.com" target="_blank"
onmouseover="document.getElementById('preview_text_content')
.innerHTML = 'a short preview description here';">
<img onmouseover="document.getElementById('preview_img_content')
.innerHTML = '<a href=\'http://www.previewed_site.com\'>
<img src=\'preview.jpg\' /></a>';" src="btn.png" width="100px"
height="40px" alt="mysite.com" />
</a>
</div>
The CSS for the btn mouseover (which works like i want but added here for reference):
.btn {
position relative;
overflow: hidden;
z-index: 1;
top: 5px;
width: 100px;
height:40px;
}
.btn a {
display:block;
width:100px;
height:40px;
z-index: 100;
}
.btn a:hover {
background: url(btn_hover.png);
}
Some words of advice or some links to example codes would be greatly appreciated
here you go..using jquery...
HTML
<div class="btn">
<a href="http://www.previewed_site.com" target="_blank" >
<img src="btn.png" width="100px" height="40px" alt="mysite.com" />
</a>
</div>
with jquery, you can use mouseover function on a selected element..jquery documentation for selector is here
JQUERY
$(document).ready(function(){ //recommened you to use script inside document.ready always
$(".btn a").mouseover(function(){ //selecting element with "<a>" tag inside an element of class "btn"
$('#preview_text_content') .html('a short preview description here'); //getting an element with an id "preview_text_content" and repalcing its html with jquery html() ;
})
$(".btn img").mouseover(function(){
$('#preview_img_content').html('<a href=\'http://www.previewed_site.com\'><img src=\'preview.jpg\' /></a>'); //similar as above
});
});
UPDATED
dynamic loading image n text...using data attribute
HTML
//first image
<a href="http://www.previewed_site.com" target="_blank" data-text_content="a short preview description here">
<img src="btn.png" width="100px" height="40px" alt="mysite.com" data-img_content="preview.jpg"/>
</a>
//second image
<a href="http://www.previewed_site.com" target="_blank" data-text_content="a short preview description here 2">
<img src="btn.png" width="100px" height="40px" alt="mysite.com" data-img_content="preview2.jpg"/>
</a>
JQUERY
$(document).ready(function(){
$(".btn a").mouseover(function(){
$('#preview_text_content') .html($(this).data('text_content'));
})
$(".btn img").mouseover(function(){
var imgContent='<a href=\'http://www.previewed_site.com\'><img src=\''+$(this).data('img_content') +'\' /></a>';
$('#preview_img_content').html(imgContent);
});
});
OR
you can always use functions to clear your codes and making it understandable..
HTML
<div class="btn">
<a href="http://www.previewed_site.com" target="_blank" onmouseover="linkMouseoverFunction()">
<img onmouseover="imgMouseoverFunction()" src="btn.png" width="100px" height="40px" alt="mysite.com" />
JAVASCRIPT
function linkMouseoverFunction()
{
document.getElementById('preview_text_content').innerHTML = 'a short preview description here';
}
function imgMouseoverFunction()
{
document.getElementById('preview_img_content').innerHTML = '<a href=\'http://www.previewed_site.com\'><img src=\'preview.jpg\' /></a>';
}