Trying to figure out how to make it when I click on three seperate links it makes a different image for each link clicked appear.
Code for javascript is:
<script type="text/javascript" src="js/jquery-1.8.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('img').click (function() {
var image = ('<img src="images/deal_men.fw.png" width="700px" height="500px" alt="Deals" />')
$('.deal_content').html(image).hide().fadeToggle('slow');
});
$('img').click (function() {
var image = ('<img src="images/deal_teen.fw.png" width="700px" height="500px" alt="Deals" />')
$('.deal_content').html(image).hide().fadeToggle('slow');
});
$('img').click (function() {
var image = ('<img src="images/deal_couples.fw.png" width="700px" height="500px" alt="Deals" />')
$('.deal_content').html(image).hide().fadeToggle('slow');
});
});
</script>
HTML being affected is:
<div id="imagelink">
<div align="left"> <img src="images/for_men_btn.fw.png" alt="For Men" />
<a href="#">
<img src="images/for_couples_btn.fw.png" alt="For Couples" />
</a>
<a href="#">
<img src="images/for_teens_btn.fw.png" alt="For Teens" />
</a>
</p>
</div>
<div class="deal_content">
<p id="clickstructions"> </p></div>
Related
How to clone an existing link with class="link" and wrap it around each img in the div "wrap"? Suppose we don't know the link so we can't just use this method:
$('#wrap img').wrap('');
HTML:
<a href="http://foo.com" class="link">
<img/>
</a>
<div id="wrap">
<img class="img" />
<img class="img" />
<img class="img" />
</div>
Result:
<a href="http://foo.com" class="link">
<img/>
</a>
<div id="wrap">
<img class="img" />
<img class="img" />
<img class="img" />
</div>
You could use the outerHTML property:
var link = $('.link').clone().empty().prop('outerHTML');
$('#wrap img').wrap(link);
Do this:
var anchor = $(".link");
anchor.html('');
$("#wrap img").wrap(anchor);
You can simply try this single line:
$('#wrap img').wrap('<a href="' + $('a.link').prop('href') + '">');
To clone the element without children:
$('#wrap img').wrap($('a.link').clone().empty());
Image dimensions in then created this is called into the picture if the picture is not loaded error image is shown.
<div id="hekimResimMini"><img src="" id="imgHekimResim" alt="" width="40" height="55" ></div>
$('#imgHekimResim').load(function(){})
.attr("src", "./personelResimi.jpeg?kurSicNo="+lcd.list[x].DOKTORID)
.error(function() {
var thisImg = this;
if ( $.browser.msie ) {
setTimeout(function() {
if ( ! thisImg.complete ) {
$(thisImg).attr('src', '../../images/error.png');
$(thisImg).css('width','40').css('height','27').css('margin-top','14px').css('margin-bottom','14px');
}
},250);
} else {
$(this).attr('src', '../../images/error.png');
$(thisImg).css('width','40').css('height','27').css('margin-top','14px').css('margin-bottom','14px');
}
});
I have an image and a button, like this:
<div id="center">
<img src="Images/img_menu/BOU.png" width="100" height="100">
</br>
<input type="image" src="Images/img_menu/play_btn.png" width="60" height="60" id="playButton" onclick=playVideo()></button>
</div>
And i want to replace that image and button with a video.
I dont want the video to appear until i press the button play. How can i do that?
Thanks
<!DOCTYPE HTML>
<html>
<head>
<title>Hide Image button and show video</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#playButton').click( function () {
$('#center').hide();
$('#video-player-div').show();
});
});
</script>
</head>
<body>
<div id="center">
<img src="Images/img_menu/BOU.png" width="100" height="100">
</br>
<input type="image" src="Images/img_menu/play_btn.png" width="60" height="60" id="playButton"/>
</div>
<div id="video-player-div" style="display:none;">Your video goes here</div>
</body>
</html>
var btn = document.getElementById('playButton');
var img = document.getElementById('img');
function playVideo()
{
img.style.display = 'none';
video.style.display = 'block';
}
btn.addEventListener('click', playVideo, false);
I think i found the solution:
HTML:
<div id="centerside">
<img src="Images/img_menu/BOU.png" id="img" width="100" height="100">
</br>
<input type="image" src="Images/img_menu/play_btn.png" id="btn" width="60" height="60" id="playButton" onclick=playVideo()></input>
<div id="showVideoDiv" style="display:none;">
<video id="myMovie" width="600" height="480">
<source src="Images/vid_menu/GOT_S4_E3.mp4">
</video>
</div>
</div>
JAVASCRIPT
function doFirst(){
var btn = document.getElementById('playButton');
var img = document.getElementById('img');
var showVideoDiv = document.getElementById('showVideoDiv');
var myMovie = document.getElementById('myMovie');
var centerside = document.getElementById("centerside");
btn.addEventListener('click', playVideo, false);
}
function playVideo(){
img.style.display = 'none';
btn.style.display = 'none';
showVideoDiv.style.display = 'block';
myMovie.play();
centerside.style.paddingTop="0px";
}
window.addEventListener('load',doFirst,false);
I have the code right so that when I click the image link jquery puts the image where it should be and at the proper size. However, I can't figure out what code to use in the javascript so that when I click the image again. It removes the current content from the div and puts it back in again instead of repeatedly putting the image in the div?
Here is the javascript code:
<script type="text/javascript" src="js/jquery-1.8.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('img').click (function() {
$('.deal_content').append('<img src="deal_content.fw.png" width="700px" height="500px" alt="Deals" />');
return false;
$('img').fadeToggle([normal]);
});
});
</script>
Here is the HTML it is effecting:
<div class="deal_content">
</div>
<div id="content">
<div id="imagelink">
<a href="#">
<img src="for_men_btn.fw.png" width="200" height="87" alt="For Men" />
</a>
<a href="#">
<img src="for_couples_btn.fw.png" width="200" height="87" alt="For Couples" />
</a>
<a href="#">
<img src="for_teens_btn.fw.png" width="200" height="87" alt="For Teens" />
</a>
</p>
</div>
Not sure if this is what you are asking for?
$(document).ready(function() {
$('img').click (function() {
var image = ('<img src="deal_content.fw.png" width="700px" height="500px" alt="Deals" />')
$('.deal_content').html(image).hide().fadeToggle();
});
});
A simple if should be able to detect if there's already an image inside your element:
<script type="text/javascript">
$(document).ready(function() {
$('img').click (function() {
if ($('.deal_content img').length > 0) {
$('.deal_content img').remove();
} else {
$('.deal_content').append('<img src="deal_content.fw.png" width="700px" height="500px" alt="Deals" />');
}
return false;
$('img').fadeToggle([normal]);
});
});
</script>
The following fade toggles the current clicked image. In this case you need to use a delegated event (see documentation) to make it work on images that are appended dynamically.
$(document).ready(function() {
$('.deal_content').on("click", "img", function() {
$(this).fadeToggle("normal");
});
});
Then add a separate event handler for your link to append the images:
$('#imagelink a').click(function() {
$('.deal_content').append('<img src="deal_content.fw.png" width="700px" height="500px" alt="Deals" />');
return false;
});
This is a little bit different than another question I just had answered. i want
<img style="float:right;" src="/explore_btn.png"> to trigger the large image to load in the <div id="show_area">. So if achor has id="list" then load that image in show_area when explore_btn.png is clicked for that container. there will be 12 different containers with thumbnails. How can I do this correctly
<script>
$('#list img').on('click',function(){
var old_img = this.src;
var new_img =old_img.split('-150x150').join('')
$('#show_area').html('<img src="'+new_img+'" />');
});
</script>
<div id="show_area"> large image here </div>
<div class="container1">
<a id="list" href="#">
<img style="float:left;" src="/escher_full-150x150.png" width="150" height="150" />
</a>
<div class="search_desc">
<strong>Escher</strong><br><br>
<!-- clicking explore_btn will load escher_full.png in the show_area div -->
<img style="float:right;" src="/explore_btn.png">
</div>
</div>
<div class="container2">
<a id="list" href="#">
<img style="float:left;" src="/footer_full-150x150.png" width="150" height="150" />
</a>
<div class="search_desc">
<strong>footer</strong><br><br>
<img style="float:right;" src="/explore_btn.png">
</div>
</div>
Change all id="list" to class="list" (because ID's must be unique) and then use this:
$('.list img').on('click',function(){
You can read this about ID attribute. You could actually change all the <a> elements with <div> instead... or why do you want to have <a> ?
So your code should look like:
<script>
$(document).ready(function () {
$('.list img').on('click', function () {
var old_img = this.src;
var new_img = old_img.split('-150x150').join('')
$('#show_area').html('<img src="' + new_img + '" />');
});
$('.search_desc img').on('click', function () {
var origin = $(this).parents('div.search_desc').parent().find('img:first')[0];
var old_img = origin.src;
var new_img = old_img.split('-150x150').join('')
$('#show_area').html('<img src="' + new_img + '" />');
});
});
</script>
I wrapped your code in a ready function so it's loaded after the page finished loading.
FIDDLE for testing
I am currently working the front-end on a website.
I am using jquery in order to create a dynamic content.
My problem is that when I type my URI (localhost/jquery/myfile/) and the index.php loads, my jquery script works, but when I click on my navigation bar and my #index.php is placed in the URI (localhost/jquery/myfile/#index.php) one of my js scripts, the one with the hover effect, doesn't work (but all my other js files work, such as my nav menu script which includes a hover effect as well).
I have made my research and found out that when the new URI is loaded, hover effect stops working.
index.php
<section id="main-content">
<div id="guts">
<div id="items">
<a style="opacity: 1;" class="item" href="#" title="">
<img src="#" width="190" height="120">
<span style="display: none;" class="caption">8 Extremely </span></a>
<a style="opacity: 1;" class="item" href="#" title="">
<img src="#" width="190" height="120">
<span class="caption">8 Amazing Javascript Experiments of Physic and Gravity Simulation</span></a>
<a style="opacity: 1;" class="item" href="#" title="">
<img src="#" width="190" height="120">
<span class="caption">8 Incredible Wordpress Plugins</span></a>
<a style="opacity: 1;" class="item" href="#" title="">
<img src="#" width="190" height="120">
<span class="caption">9 Web CSS Tools You Must Know</span></a>
<a style="opacity: 1;" class="item" href="#" title="">
<img src="#" width="190" height="120">
<span style="display: none;" class="caption">10 Image Galleries jQuery Script with Thumbnail Filmstrip</span></a>
<a style="opacity: 1;" class="item" href="#" title="">
<img src="#" width="190" height="120">
<span style="display: none;" class="caption">Single Page Websites With Creative Javascript Effects</span></a>
<a style="opacity: 1;" class="item" href="#" title="">
<img src="#" width="190" height="120">
<span class="caption">13 Simple but Useful Online Tools for Web Development</span></a>
<a style="opacity: 1;" class="item" href="#" title="">
<img src="#" width="190" height="120">
<span class="caption">8 Ways to Increase the Readibility and Beautify your HTML Code</span></a>
<a style="opacity: 1;" class="item" href="#" title="">
<img src="#" width="190" height="120">
<span class="caption">12 Insanely Awesome Javascript Effects</span></a>
<a style="opacity: 1;" class="item" href="#" title="">
<img src="#" width="190" height="120">
<span style="display: none;" class="caption">10 New jQuery Plugins You Have to Know</span></a>
<a style="opacity: 1;" class="item" href="#" title="">
<img src="#" width="190" height="120">
<span class="caption">20 Firefox Plug-ins for Web Designers and Developers</span></a>
<a style="opacity: 1;" class="item" href="#" title="">
<img src="#" width="190" height="120">
<span class="caption">12 Amazing and Creative Javascript Games</span></a>
</div>
</div>
</section>
ext.js
$(document).ready(function () {
//loop through all the children in #items
//save title value to a span and then remove the value of the title to avoid tooltips
$('#items .item').each(function () {
title = $(this).attr('title');
$(this).append('<span class="caption">' + title + '</span>');
$(this).attr('title','');
});
$('#items .item').hover(
function () {
//set the opacity of all siblings
$(this).siblings().css({'opacity': '0.2'});
//set the opacity of current item to full, and add the effect class
$(this).css({'opacity': '1.0'}).addClass('effect');
//show the caption
$(this).children('.caption').show();
},
function () {
//hide the caption
$(this).children('.caption').hide();
}
);
$('#items').mouseleave(function () {
//reset all the opacity to full and remove effect class
$(this).children().fadeTo('100', '1.0').removeClass('effect');
});
});
dynamicpage.js
$(document).ready(function () {
$(function() {
var newHash = "",
$mainContent = $("#main-content"),
$pageWrap = $("#page-wrap"),
baseHeight = 0,
$el;
$pageWrap.height($pageWrap.height());
baseHeight = $pageWrap.height() - $mainContent.height();
$("nav").delegate("a", "click", function() {
window.location.hash = $(this).attr("href");
return false;
});
$(window).bind('hashchange', function(){
newHash = window.location.hash.substring(1);
if (newHash) {
$mainContent
.find("#guts")
.fadeOut(200, function() {
$mainContent.hide().load(newHash + " #guts", function() {
$mainContent.fadeIn(200, function() {
$pageWrap.animate({
height: baseHeight + $mainContent.height() + "px"
});
});
$("nav a").removeClass("current");
$("nav a[href='"+newHash+"']").addClass("current");
});
});
};
});
$(window).trigger('hashchange');
});
});
I would really appreciate if you could help me find why this is happening.
Thanks in advance,
harris21
*edit:*My dynamic menu is working fine, the problem is that the the ext.js script is not working.
Try using on() if you are using a recent version of jQuery (1.7+), or delegate() if its an older version, instead of just hover()
Like this:
$("#main-content").on("mouseenter", "#items .item", function(event){
// your function
}).on("mouseleave", "#items .item", function(event){
// your function
});
See: http://api.jquery.com/on/
When working with dynamic content be sure to use jquery.on (the newer version of live).
$.on('click', function(){
});
instead of
$.click(function(){});
I found some solution for this problem.
$(document).on("mousemove",".objectclass",function(){
console.log("mousemove");
});
its works fine!