I am working on an image gallary inside a web templete. where each image is constrcuted as follow:-
<li>
<figure><img src="~/img/small.jpg" alt=""><span><strong>Project name:</strong><em>Villa</em><img src="~/img/search.png" alt=""></span></figure>
</li>
now as shown inside the markup, when the user visit the page the small.jpg will be rendered , then if he click on the small.jpg , another image named big.jpg will be shown inside a jquery slider, here is a sample on a real website http://static.livedemo00.template-help.com/wt_47767/index-2.html
now what i want to do is to replace the search.png with a button or a link (although adding a link will not work because the markup is already inside a link !!) with "Read More" label, so if the user clicks on the ReadMore either on the slider or inside the normal web page to redirect him to another page ?
can anyone adivce on this please ?
second question. i am trying this more complex scenario, is to keep the current search.png inside the web page , but to replace it with "ReadMore" on the slider ?
EDIT
i want to avoid adding additional span inside my markup since there is a script which are going to read the span and display them inside the jquery slider. so i replaced the span with a text as follow:
<li>
<figure><img src="~/img/small.jpg" alt=""><span><strong>Project name:</strong><em>Villa</em><text class="read-more" data-goto="/Home/">Read More</text></span></figure>
</li>
and here is the script:-
<script>
$(function () {
$('.read-more').on("click", function (e) {
window.location = $(this).attr('data-goto');
e.stopPropagation(); // this prevents the anchor click from triggering.
});
})
</script>
but currently inside the slider i will get the following text,
but when i click on it i will not be redirected to the home page , instead the jquery slider will be dismissed. and if i am inside the web page (not inside the jquery slider) and i lick on ReadMore i will just get the picture on my browser...
BTW here is the callback function inside the touch.jquery.js script which i wrote to add the span inside the slider:-
function loadImage(src, callback){
var img = $('<img>').on('load', function(){
callback.call(img);
});
img.attr('src', src);
var allcaptions = $("figure span");
// setTimeout is a hack here, since the ".placeholders" don't exist yet
setTimeout(function () {
$(".placeholder").each(function (i) {
// in each .placeholder, copy its caption's mark-up into it (remove the img first)
var caption = allcaptions.eq(i).clone();
caption.find("img").remove();
$(this).append("<div class='caption'>" + caption.html() + "</div>");
});
}, 500
);
}
Use a span tag with the data attribute containing your url in place of the search image.
<li>
<figure>
<a href="~/img/big.jpg" class="thumb">
<img src="~/img/small.jpg" alt=""/>
<span><strong>Project name:</strong><em>Villa</em>
<span class="read-more" data-goto='/read/more/url'>Read More</span>
</span>
</a>
</figure>
</li>
then the javascript would be:
$(function(){
$('.read-more').click(function(e){
window.location = $(this).attr('data-goto');
e.stopPropagation(); // this prevents the anchor click from triggering.
});
})
Related
well i have seen some similar questions but i couldn't find the solution i needed i am trying to make it so that when the user moves from one page to another in the website when the page is loaded the a tag should change color and stay that way i have tried using this code but it didnt work at all here is the html of the code
<div id="button-group" style="width:100%">
<img src="felix.png" id="cat" >
home
Hobbies
Contact
Services
</div>
so for example if i am on the Hobbies page and click the home page the home page should turn the color to blue or if i am on hobbies and its clicked it should also change color onload
here is the jquery that i tried
$(document).ready(function(){
$("#hobbies").trigger('.click');
});
and here is the css when triggered
.a :click {
background-color:rgba(0, 183, 255, 0.788);
}
You can use sessionStorage to store the link that was clicked and get it when the new page is loaded to set a class to the last clicked navigation element.
$(document).ready(function() {
let clicked = $.trim(sessionStorage.getItem("clicked"));
if (clicked) {
$("#button-group a").each(function() {
if ($.trim($(this).attr("href")) == clicked) {
$(this).addClass("clicked");
};
});
}
$("#button-group a").on("click", function() {
$("#button-group a").each(function() {
$(this).removeClass("clicked");
});
let link = $(this).attr("href");
$(this).addClass("clicked");
sessionStorage.setItem("clicked", link);
});
});
As a stack snippet for this doesn't work on Stackoverflow, here's a Fiddle with the adjustment to use preventDefault() on click of a link. Just run the Fiddle again after clicking on a link to see that the last clicked link gets added the class clicked.
I'm trying to do is - Before application is ready, it reads some data from one of the external file, make a new dyanamic "li" based on the file content and then it renders that li on html.
Just to add some explanation - There are two "li" in code
1) Dynamic li - that generates after reading a line from file
2) Static li - that display static li
So, whenever i try to click on "Static link" it calls click event and display me result which works fine.However, when i click on dynamic link, it doesn't trigger the click event
Another thing i noticed, When application is ready it display "its now generating static link first" alert first then it displays "its now generating dynamic link". Potentially, it should display the "dynamically link" alert first and the static link alert afterwards.
HTML
<body>
<div class="ui-page ui-page-active" id="main">
<header>Open Fulfillment Order</header>
<div id="ordersList" style="text-align: left">
<ul id="dynamicList" style="text-align: left;padding-left: 70px;padding-top: 30px">
</ul>
</div>
</div>
</body>
File.txt
Order1, 3/15/2017, 2
Order2, 3/10/2017, 3
Order3, 3/30/2017, 4
order4, 3/20/2017, 2
Javascript file
$(document).ready(function() {
$.get('file/data.txt', function(data) {
alert("its now generating dynamic link");
var lines = data.split("\n");
for (var prop in lines) {
var orderData = lines[prop];
var splittedData = orderData.split(",");
// Dynamic link hard coded string will be repalced with actual order name
$("#ordersList ul").append('<li><span class="tab">Dynamic Link</span></li>');
}
});
alert("its now generating static link first");
$("#ordersList ul").append('<li><span class="tab">Static Link</span></li>');
});
$(document).ready(function() { //dom is now loaded in.
$('#dynamicList li').click(function() {
alert($(this).find('a').attr('data-value')); // this will alert data-value value.
});
});
Any idea why click event is not being called on Dynamic Link?
the issue could be that when you use
$('#dynamicList li').click(function() {
alert($(this).find('a').attr('data-value')); // this will alert data-value value.
});
jQuery only creates bindings for the li elements that currently exist on the page. If lis are added later, try using this instead
$(document).on('click', '#dynamicList li', function() {
alert($(this).find('a').attr('data-value')); // this will alert data-value value.
});
I need to load an image, js need to get link url and print this image on screen.
But it is not working.
What is wrong with my script? what can I do to make it work and improve it?
html
<div id=img></div>
<div id=loading></div>
<a href=http://png-5.findicons.com/files/icons/1580/devine_icons_part_2/128/my_computer.png class=postmini>Open image 1</a>
<br>
<a href=http://www.iconshock.com/img_jpg/BETA/communications/jpg/256/smile_icon.jpg class=postmini>Open image 2</a>
js
$(function() {
$(".postmini").click(function(){
var element = $(this);
var I = element.attr("href");
$("#loading").html('<img src="loader.gif" align="absmiddle"> loading...');
$("#loading").ajaxComplete(function(){}).slideUp();
$("#img").append(I);
});
});
https://jsfiddle.net/u6j2udzb/
and this loading div, what I need to do to make it work properly?
You are missing a lot and have a lot you don't need. I have commented out where you don't need items. In particular you don't need a loading because the image will be there before they see that. However, if you do want it still, you should be loading it underneath the image you are loading. So it gets covered by the image. I can update it with that if you'd like.
What you are missing is actual code to turn the href into an image source and you are not removing the default action of the anchor tag so it doesn't try loading a new page when clicked.
$(".postmini").click(function(event){
event.preventDefault();
var element = $(this);
var I = element.attr("href");
//$("#loading").html('loading...');
//$("#loading").ajaxComplete(function(){}).slideUp();
// remove old image if it is already there.
$("#img").empty();
// create variable holding the image src from the href link
var img = $("<img/>").attr("src", I)
$("#img").append(img);
});
https://jsfiddle.net/3g8ujLvd/
You just have to insert an img tag into your "display div" on click on the link... to load the image... (btw your syntax errors are terrible... you have to use quotes for attributes^^)
like this for example :
$('.postmini').on('click',function(){
//do something
});
Check this : https://jsfiddle.net/u6j2udzb/8/
(done quickly for example)
Hope it helps
You are not running an ajax script. ajaxComplete is only fired after an ajax script completed.
Whenever an Ajax request completes, jQuery triggers the ajaxComplete
event. Any and all handlers that have been registered with the
.ajaxComplete() method are executed at this time.
You should ad an ajax script and than ajaxComplete will run if you registered the ajaxComplete method.
At the moment you're just placing the text from the "href" attribute on the link into the div. You need to either create an image or use the link provided as a background.
The quickest way to see this is to change make this change:
var element = $(this);
var I = element.attr("href");
$("#loading").html('<img src="loader.gif" align="absmiddle"> loading...');
$("#loading").ajaxComplete(function(){}).slideUp();
// $("#img").append(I);
$("#img").html("<img src='"+I+"' />");
$('.postmini').on('click',function(e){
e.preventDefault();
$('#loading').html('<img src="'+this.href+'">').children('img').one('load',function(){$(this).parent().slideUp('slow');});
});
Noticed I used on instead of click this allows you to use this.href rather than a more lengthy $(this).attr('href'). I also used .one on a child image element to find out if the image has loaded.
But I've just realised that this is useless because you want to have a loader. Ma bad.
$('.postmini').on('click',function(e){
e.preventDefault();
//best have the loader.gif showing on default before the load is complete.
var img=$('<img class="loadedImage">');
img.src=this.href;
//img.css({display:none;});//remove this if you've enter CSS .loadedImage{display:none;}
$('#loading').append(img).slideDown('slow',function(){$(this).children('.loadedImage').one('load',function(){$(this).fadeIn('slow');$(this).siblings('img[src="loader.gif"]').hide();});});
});
This method is what you're looking for. Basically you want to click the link, stop the default action of going to the link, make a new image element and set the src, make sure it's hidden before load, add the new image element to loading, slide up parent loading, check for load and fade in :)
Try and run this simple snippet
$('#myButton').click(()=>{
let imgUrl = $('#imgUrl').val();
$.get(imgUrl)
.done(() => {
$('img').attr('src', imgUrl);
$('#imgText').text('');
})
.fail(() => {
$('#imgText').text('Image does not exist');
$('img').attr('src', '');
})
})
img {
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Image url: <input type="text" id="imgUrl" value="https://upload.wikimedia.org/wikipedia/commons/7/75/Woman_mechanic_working_on_engine_%28cropped%29.jpeg"><br>
<button id="myButton" type="button">click here to load image</button>
<div id="imgText"></div>
<img>
I would like all HTML link (<a href=...) tag to show an image (GIF preloader) center of the screen when clicked. Currently, I have a code that shows a loading progress bar but it only shows when that page is loaded. I want the GIF preloader to show immediately after user clicked on a link.
What code and where do I need to add?
Try this,
$(function(){
$('a').on('click',function(e){
$('<img src="image-pat/img.gif" class="image-loader"/>').appendTo('body');
// ....
// your code
// ....
if($('.image-loader').length) { // check length to remove image-loader again
$('.image-loader').remove();// use, if you want to remove the loader again
}
return true;
});
});
You have to preload the image.
To do that, either create an image element and hide the image, only show on click.
OR
You can call createElement on the document ready function and set its source like below:
var elem = document.createElement("img");
elem.setAttribute("src", "images/my_image.jpg");
Then, when you use that source elsewhere, it would show the image immediately as its already loaded by browser.
use jquery .imageloader()
<img class="img" src="image.png" />
<script>
$(function() {
$('.img').imageloader();
});
</script>
add the function to a button
Hope this helps.
Visit here for loads of examples.
.imageloader()
try this out
I'm using Colorbox to show the html content of hidden divs on my page. I can get this to work perfectly with the following:
$("a.colorbox").colorbox({width:"600px", inline:true, href:"#344"});
This will show the div with the ID of 344.
However, because I'm trying to build a scalable and dynamic page with WordPress, I want to be able to grab the ID of my divs through a function, rather than hard code them in the jquery call.
I modified Jack Moore's example:
$("a[rel='example']").colorbox({title: function(){
var url = $(this).attr('href');
return 'Open In New Window';
}});
so that it looks like this:
$(".colorbox").colorbox({width:"600px", inline:true, href:function(){
var elementID = $(this).attr('id');
return elementID;
}});
The problem with this is that the href property of the colorbox function is looking for a string with a # mark infront of the ID. I tried various ways of concatenating the # to the front of the function, including the # in the return value, and concatenating the # to the elementID variable. No luck.
I also tried using the syntax in Jack's example (with no luck) so that my return statement looked like this:
return "#'+elementID+'";
I think my basic question is: How do I use colorbox to show hidden divs on my page without hardcoding everything?
Thanks for your help,
Jiert
I didn't really like any of the answers given above. This is how I did it (similar but not quite the same).
I also fully commented it for people a bit new to Javascript and the colorbox plug in.
$(document).ready(function() { //waits until the DOM has finished loading
if ($('a.lightboxTrigger').length){ //checks to see if there is a lightbox trigger on the page
$('a.lightboxTrigger').each(function(){ //for every lightbox trigger on the page...
var url = $(this).attr("href"); // sets the link url as the target div of the lightbox
$(url).hide(); //hides the lightbox content div
$(this).colorbox({
inline:true, // so it knows that it's looking for an internal href
href:url, // tells it which content to show
width:"70%",
onOpen:function(){ //triggers a callback when the lightbox opens
$(url).show(); //when the lightbox opens, show the content div
},
onCleanup:function(){
$(url).hide(); //hides the content div when the lightbox closes
}
}).attr("href","javascript:void(0)"); //swaps the href out with a javascript:void(0) after it's saved the href to the url variable to stop the browser doing anything with the link other than launching the lightbox when clicked
//you could also use "return false" for the same effect but I proffered that way
})
}
});
And this is the html:
<a class="lightboxTrigger" href="#lightboxContent">Lightbox trigger</a>
<div id="lightboxContent" class="lightboxContent"> <!-- the class is just to make it easier to style with css if you have multiple lightboxes on the same page -->
<p>Lightbox content goes here</p>
</div>
I think it would work with multiple lightboxes on the one page but I haven't tested it with that.
I'm facing the same issue. What does your html look like? meaning, how did you structure your "divs"
Mine looks like this:
Javascript:
<script>
$(document).ready(function () {
$("a.colorbox").colorbox({ width: "50%", inline: true, href: function () {
var elementID = $(this).attr('id');
return "#" + elementID;
}
});
});
</script>
And the html looks like (I tried changing the display:none):
<a class='colorbox' href="#">Inline HTML</a>
<div style="display:none">
<div id="pop">
This data is to be displayed in colorbox
</div>
</div>
return "#" + elementID;
will have the desired effect as David says.
This is the way I got it to work
HTML: (taken from the example in one of the answers)
<a class="lightboxTrigger" href="#lightboxContent">Lightbox trigger</a>
<div id="lightboxContent" class="lightboxContent"> <!-- the class is just to make it easier to style with css if you have multiple lightboxes on the same page -->
<p>Lightbox content goes here</p>
</div>
Javascript:
$('a.lightboxTrigger').click(function(){
var ref = $(this).attr("href");
$.colorbox({ html: $(ref).html() });
$.colorbox.resize();
});