I am trying to write a function so that when I click on an image it loads external content.
<section class='images'>
<img class="review-img" id="lifeofpi" src="./images/lifeofpi.jpg"></img>
</section>
$(document).ready(function(){
$("#lifeofpi").click(function(){
$("#lifeofpi").load("lifeofpi.txt #p1");
});
});
When I click on the image I want it to load this external content from a text document. But when I click on the image nothing happens.
You are trying to load content into the image. You need to add it to an element that can actually have children.
<section class='images'>
<img class="review-img" id="lifeofpi" src="./images/lifeofpi.jpg">
<div id="lifeofpi_details"></div>
</section>
$(document).ready(function(){
$("#lifeofpi").on("click", function () {
$("#lifeofpi_details").load("lifeofpi.txt #p1");
});
});
$("#lifeofpi").on("click","#p1 lifeofpi.txt",function (e) {
e.preventDefault();
alert(this.id);
});
Read about event-delegation
Related
I want creating a website with some small news on the start-page. I show only the pics and show the headline and a small sentence with an hover-effect. Unfortunately I have no experience with jQuery and my code doesn't work.
$(document).ready(function () {
$(this).removeClass("#news-container .newscontent")
});
$(document).ready(function () {
$("#news-container img").hover(function () {
$(this).addClass("#news-container .newscontent");
}, function () {
$(this).removeClass("#news-container .newscontent");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
If you want to toggle some class or the visibility of some childs with jquery the dom stucture is key. Let's assume you got the following structure:
<div class="newscontent">
<img class="image" src="...">
<div class="text">Some text</div>
</div>
The following code registers for the hover event on every image within an element with a newcontent class. The image with the hover $(this) searches for the next element with a text class and toggles the visibility.
$('.newscontent img').hover(function(){
if ( $(this).next('.text').css('visibility') === 'visible' ){
$(this).next('.text').css('visibility', 'hidden');
}else{
$(this).next('.text').css('visibility', 'visible');
}
});
You can find a full working example here:
https://jsfiddle.net/3xy8ar96/1/
I've been attempting to create an effect where a user clicks on an image, that image is replaced by another image which also acts as a link.
However my problem is that whenever I click the replaced image, the link doesn't work.
Fiddle: http://jsfiddle.net/ha6qp7w4/321/
$('.btnClick').on('click',function(){
$(this).attr('src','https://placekitten.com/g/200/300')
$(this).attr('href','google.com')
});
img tags don't have href properties. You need to wrap the image in an anchor and assign the url to that, or do a custom redirect.
Notice your image html on inspection of element:
<img src="https://placekitten.com/g/200/300" id="1" class="btnClick" href="google.com"> <!-- not valid! -->
This isn't valid because imgs aren't anchors!
function first() {
this.src = 'https://placekitten.com/g/200/300';
$(this).unbind("click");
$(this).on("click", second);
}
function second() {
window.location.href = "https://www.google.com";
$(this).unbind("click");
$(this).on("click", first);
}
$('.btnClick').on('click', first);
(I tried to make a fiddle but it wouldn't save, but this should work)
You need to store your actions in functions so you can revert if need be. First action is the change the source, then change the event to redirect you like a link.
here is an example.
example
html part
<img src="http://i.imgur.com/o46X87d.png" data-new="http://i.imgur.com/9lf2Mjk.png" id="1" class="btnClick" />
add data-new attribute on image with new url of image
and replace it with js
$('.btnClick').on('click',function(){
var url = $(this).attr("data-new");
$(this).attr("src", url);
});
I would use a totally different approach, but here's how to do that with the code you already have:
<div class="btnClick">
<img src="http://i.imgur.com/o46X87d.png" id="1" />
<a href="javascript:check()" id="2" style="display:none;">
<img src="http://i.imgur.com/9lf2Mjk.png" id="static" />
</a>
</div>
<script type="text/javascript">
$('.btnClick').on('click',function(){
if($('#1').is(':visible')) {
$('#1').hide();
$('#2').show();
} else {
$('#1').show();
$('#2').hide();
}
});
</script>
I purposely didn't use toggle() to better show the technique, in case you'd want to turn the click event off when the clicking image appears etc.
I'm currently working on a new personal portfolio site using very basic html/css/jquery code. I'm trying to build my own gallery to display my work (instead of using an already existing one like lightbox) but I've run into an annoying issue: I've tried to make the "forward-button" display the immediate following div but instead it fades in all the following divs. Here's my (condensed) code:
HTML:
<!--navigation buttons for gallery-->
<a id="back-button"><img src="image.png" /></a>
<a id="forward-button"><img src="image.png"/></a>
<!--gallery begins here-->
<div id="gallery">
<div id="first-div" class="work-display">
<img src="images/albumust-display.png" class="work-image" />
<div class="caption" id="wd1c">
<p class="caption-text">caption</p>
</div>
</div>
<div id="second-div" class="work-display">
<img src="images/ce-display.png" class="work-image" />
<div class="caption">
<p class="caption-text">caption</p>
</div>
</div>
<div id="third-div" class="work-display">
<img src="images/display.png" class="work-image" />
<div class="caption">
<p class="caption-text">caption</p>
</div>
</div>
CSS (all divs inside gallery are hidden by default):
.work-display {
display:none;
position:absolute;
}
What I'm trying to do with Jquery is that everytime someone opens a thumbnail, give the corresponding div that displays the image on full size a "true" state of "active" and then fade in, like this:
$( "#thumb-1" ).click(function(){
$( "#first-div" ).prop("active",true);
$( "#first-div" ).fadeIn();
});
all divs originally have a state of "active" = false:
$( "#gallery" ).children("div").prop("active",false);
then this is what I've tried to do with the "forward-button":
$("#forward-button").click(function () {
$("#gallery").find( $("div").prop("active",true) )
.prop("active",false)
.fadeOut()
.next().fadeIn();
$(".caption").fadeIn();
});
But then what it does is that instead of fading in only the next div, it fades all the divs that come after. what am I doing wrong?
I'm very new to Javascript/Jquery so probably this isn't the smartest way to go about this, if you have a simpler solution, do tell me.
I couldn't test it properly, because I don't have the whole code (and the images either). But this should do the trick:
$(function () {
$("#gallery div").attr("active", false);
$("#thumb-1").click(function () {
$("#first-div").attr("active", true).fadeIn();
});
$("#forward-button").click(function () {
$("#gallery div[active=true]:first")
.attr("active", false)
.fadeOut()
.next()
.attr("active", true)
.fadeIn();
});
$("#back-button").click(function () {
$("#gallery div[active=true]:first")
.attr("active", false)
.fadeOut()
.prev()
.attr("active", true)
.fadeIn();
});
});
Kind of demo: http://jsfiddle.net/W8VLh/13/
Just in case you have a reason to use 'active' properties instead of classes:
$("#forward-button").click(function () {
$("#gallery").find( "div[active='true']")
.prop("active",false)
.fadeOut()
.next().fadeIn().prop("active",true);
$(".caption").fadeIn();
});
I have 6 DIVs that show and hide, triggered by an onClick event. Currently if you click the 6 different pictures that trigger these divs, they all show up on top of eachother.
I would like only one DIV to show up at a time. So when you click a different image, it hides the currently displayed div and shows the new one.
I am guessing I need to loop through these somehow, can anyone point me in the right direction? My code:
<script type="text/javascript">
$(document).ready(function () {
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function () {
$(".slidingDiv").slideToggle();
});
$(".slidingDiv2").hide();
$(".show_hide2").show();
$('.show_hide2').click(function () {
$(".slidingDiv2").slideToggle();
});
$(".slidingDiv3").hide();
$(".show_hide3").show();
$('.show_hide3').click(function () {
$(".slidingDiv3").slideToggle();
});
$(".slidingDiv4").hide();
$(".show_hide4").show();
$('.show_hide4').click(function () {
$(".slidingDiv4").slideToggle();
});
$(".slidingDiv5").hide();
$(".show_hide5").show();
$('.show_hide5').click(function () {
$(".slidingDiv5").slideToggle();
});
$(".slidingDiv6").hide();
$(".show_hide6").show();
$('.show_hide6').click(function () {
$(".slidingDiv6").slideToggle();
});
});
</script>
Not completely sure if this is what you're going for, but something like this might work:
HTML:
<img class="div1" src=...>
<img class="div2" src=...>
<img class="div3" src=...>
<!-- more images can go here -->
<div class="div1">text1</div>
<div class="div2">text2</div>
<div class="div3">text3</div>
<!-- more divs to display go here -->
JQuery:
$("img").click(function () {
$("div").slideUp(190); // hide divs previously shown
var divSelect = $(this).attr('class'); // get class of div to show
$("div."+divSelect).delay(200).slideDown(); // show div after other slides up
});
WORKING EXAMPLE
I am still working on simplifying it, but it works. You will have to repeat it to every div, giving different selector names. When I figure a loop out, I will let you know.
Good luck!
<!--HTML starts-->
<div class="med-wrap-video">
<div> <p class="body-text"> <iframe width="100%" height="100%" src="https://www.youtube.com/embed/6z9KMHt-Ta4" frameborder="1" allowfullscreen> </iframe>
<br>
Read More</p>
<br>
<span class="selector1">
<p class="body-text">
Title: <br>
Composer: <br>
Year: <br>
</p>
</span>
</div>
</div>
<!--JS begins-->
$(document).ready(function(){
$(".selector1").hide();
$(".a selector").click(function(event){
event.preventDefault(); //prevents page to reload
$(".selector1").slideToggle(600);
$(this).toggleClass(".selector1");
});
I have inc/content.php file which contains iframe with src= to my domain.
On my index.php page I have button <button id="nextButton" onClick="viewNext();return false;">New</button> which when clicked calls following JavaScript function:
<script type="text/javascript">
function viewNext()
{
$('#content').load('inc/content.php');
}
</script>
Function loads iframe from inc/content.php file into index.php page <div id="content"></div>
How can I show loading.gif image while inc/content.php file gets loaded into index file?
You can display the loading image before loading the page, and hide it when done (use the second parameter for adding a callback which is called when the request has completed):
$("#loading").show();
$("#content").load("inc/content.php", function () {
$("#loading").hide();
});
Obviously, you need an element in your document with the ID loading, like:
<img id="loading" src="loading.gif" alt="Loading">
<script type="text/javascript">
function viewNext()
{
show_loading()
$('#content').load('inc/content.php' , hide_loading );
}
function show_loading(){ $('.loading').show() }
function hide_loading(){ $('.loading').hide() }
</script>
While "loading" is the classname of the div that contains loading.gif.
For the loading.gif image, you should put it into a div which can "float" at the center of your page like this :
HTMLCODE:
<div style="position:absolute; top:100px; left:50%;" class="loading">
<img src="/img/loading.gif" />
</div>
You can change the appearing position of the loading image by changing the inline style "top:... ; left:....;". If you want to posiion the loading bases on screen, instead of the page's position, then replace position:absolute; by: position:fixed; (although this won't work with IE)
If you want it to look nice, here is solution i use at job which puts a modal in the screen and a loading gif in the middle.
<script type="text/javascript">
function viewNext()
{
$('#loading').attr( 'src', 'some_path/loading.gif' );
$('#container').block( { message: $( '#loading' ) } );
$('#content').load('inc/content.php' , function(){ $('#container').unblock(); } );
}
</script>
it uses jquery.blockUI.js which allows me to block certain container, may be a div or the whole screen.
The html you need is this
<img id="loading" style="display: none;" src="" />