I have a pagination div that contains links to the previous page <span id="previous"><a href="www.site.com/page/1" >Previous</a>, and to the next page. On the first page, there will not be any link to the previous page.
Now I have 2 image buttons with front and back arrows. If the user clicks on these buttons, jQuery will take the link from the pagination div as mentioned above and redirect the user to these links. However if the pagination link does not exist like on the first page, clicking the previous button will not do anything.
My Code:
//img has id = info_rightclick_left
$("#info_rightclick_left").click(function() {
if($("#pagination_previous")) {
window.location = $("#pagination_previous a").attr("href");
} else {
alert("NOO");
}
});
The problem now is that it seems like whether or not #pagination_previous exists, clicking the image still redirects the user. In this case, on page 1, the user gets redirected to undefined
How can I solve this?
Try this.
$("#info_rightclick_left").click(function() {
if($("#pagination_previous").length) {
window.location = $("#pagination_previous a").attr("href");
} else {
alert("NOO");
}
});
the answer in your question itself! just check for undefined like so:
$("#info_rightclick_left").click(function() {
if($("#pagination_previous a").attr("href") !== "undefined") {
window.location = $("#pagination_previous a").attr("href");
}
});
if($("#pagination_previous").length > 0) {
jQuery returns a list of captured elements, if it doesn't find any it will return an empty list, but still a list
Related
I have website, created with Elementor. Website belongs to photographer. He has got there an Elementor Multigallery, with filter at the top. I need to create external links, which can bring you to the subpage and directly show only filtered items.
Here's the link to multigal: https://chosephoto.com/photo/
I need to do something like that, when I enter the https://chosephoto.com/photo/#fashion I will received the current subpage, but it will shows only images from gallery "fashion". Not all images.
I thought about imitating jQuery click by query string (get the value of /#....) and then do the jquery click the with attribute, which equals the value in query string, However I even don't know, how can I do it with jQuery. I am jQuery beginner.
Thank you for a help.
So, finally, here's my "solution"
$ = jQuery;
$(window).bind('load', function() {
var hash = $(location).prop('hash').substr(1);
if(hash == 'portrait') {
$('a[data-gallery-index=0]').trigger('click');
} else if (hash == 'fashion') {
$('a[data-gallery-index=1]').trigger('click');
} else if (hash == 'product') {
$('a[data-gallery-index=2]').trigger('click');
} else if (hash == 'sky-photo') {
$('a[data-gallery-index=3]').trigger('click');
} else {
$('a[data-gallery-index=all]').trigger('click');
}
});
I had to use .bind('load'), instead of document.ready() function, because the gallery do the additional javascript after the document is ready (and it has overwritten my code).
You can call the filter with getting the URL, based on the hashtag at the end. For example this URL: https://chosephoto.com/photo/#fashion will filter the FASHION gallery.
My knowledges are not enough, to do it better way. But it works!
I have a page with a few filters for search results. These filters are links and upon clicking, I am adding the id to localstorage. When the page reloads it looks in the localstorage if the id of the link exists, it modifies the css of that particular link. I am able to achieve this.
Now, when the same link is clicked again, I need to be able to remove the id of the link from localstoarage so it does not change the css when the page reloads.
Before Clicking
After clicking
Here is my code. Some kind people from StackOverflow helped me get this piece of code together. I need it to extend. Please let me know if any of this doesn't make sense. Would gladly rewrite my sentences.
$(document).ready(function() {
//localStorage.clear();
var cached = localStorage.getItem('filters');
var filters = (cached) ? JSON.parse(cached) : {};
for (id in filters) {
$('#' + id).addClass('li-checked');
}
$('.li-filter').click(function(e) {
//event.preventDefault();
$(e.target).addClass('li-checked');
$(e.target).removeClass('li-unchecked');
var id = $(e.target).attr('id').toString();
if (filters[id]) {
filters[id] += 1;
//filters = $.grep(filters, function(e) { return e.id!=id });
} else {
filters[id] = 1;
}
console.log(JSON.stringify(filters));
localStorage.setItem('filters', JSON.stringify(filters));
});
});
#Rohit If I understood your question correctly, onclick you have to add a class and remove it in case it is already clicked.
For this scenario, I will suggest writing functionality to toggle classes that can help.
You need to get class on the element while li is clicked.
if($(e.target).attr("class").contains("li-checked"))
{
$(e.target).removeClass('li-checked');
$(e.target).addClass('li-unchecked');
}
else if((e.target).attr("class").contains("li-unchecked"))
{
$(e.target).removeClass('li-unchecked');
$(e.target).addClass('li-checked');
}
If the class is 'li-checked' then remove it and add 'li-unchecked'
and if the class is 'li-unchecked' then remove it and add 'li-checked'
I hope it helps.
I have one page website which changes URL #id or anchor text on scrolling and on navigation click. I have an image positioned fixed at the center of the site. The site is divided in different sections and the image shows in all the sections. I do not want to show the image on the first section as it is unrelated to the content of the 1st section but will be showed in all next sections. How can I make it work?
What I have tried till now but not working:
$(document).ready(function(){
$(".phone").hide();
var idSample = window.location.href.split("#");
var id = "#"+idSample[1];
if($(id) == "second"){
$(".phone").show();
}else{
$(".phone").hide();
}
});
Rest in Fiddle: https://jsfiddle.net/shubhamjha1000/vh7bu32q/
I don't want that phone to be seen on 1st section but on rest of the sections. Please help me guys!
You can use the answer written in this question to listen to changes in the window see what url you are on and show or hide the phone accordingly....
Example:
$(function(){
// Bind the event.
$(window).hashchange(hashchanged);
// Trigger the event (useful on page load).
hashchanged();
});
function hashchanged(){
var hash = location.hash.replace( /^#/, '' );
//your code
if(hash == "#first") {
// Hide element
} else {
// Show element
}
}
But still even though what you are planning to do will work with that solution I think it would still look bad on the app it self and instead of a hovering phone maybe you can create the phone as an img inside the relevant containers and hide and show with id...
You can simply use a substring on your location.hash for get your hash tag
$(document).ready(function(){
$(".phone").hide();
var id = window.location.hash.substr(1);
if($(id) == "second"){
$(".phone").show();
}else{
$(".phone").hide();
}
});
Is there a way I can trace what the user does on the page. Mainly I want to do the following thing: User opens a page, if he does not click anywhere on that page to show a tooltip (i'm using tipsy) guiding him which parts are clickable.
So far I've tried several stuffs:
I have set tipsy to show manually: trigger:manual;
I made a variable that equals false until the user clicks those
clickable items (divs and images)
If the variable is false, show the tooltip (tipsy).
But I'm missing something because this doesn't work. Here is my code.
$(document).ready(function() {
var userClick = false;
function showTooltips() {
$(document).ready(function()) {
if(userClick === false)
$('.nickname .pseudo-white').tipsy('show');
}
setTimeout(showTooltips(), 5000);
});
Try getting rid of the extra call to $(document).ready, and pass the function name to setTimeout rather than calling it with ()
$(document).ready(function() {
var userClick = false;
function showTooltips() {
if(userClick === false)
$('.nickname .pseudo-white').tipsy('show');
}
setTimeout(showTooltips, 5000);
});
Here's what I have so far, which allows the user to click an image to open a new window and go to a location. When that click occurs, the image in the parent window is replaced with the next div.
Example: http://jsfiddle.net/rzTHw/
Here's the working code so far...
<div class = "box"><img src="http://placehold.it/300x150/cf5/&text=img+1"></div>
<div class = "box"><img src="http://placehold.it/300x150/f0f/&text=img+1"></div>
<div class = "box"><img src="http://placehold.it/300x150/fb1/&text=img+1"></div>
<div class = "box"><img src="http://placehold.it/300x150/444/&text=img+1"></div>
Jquery:
$('.box').not(':first').hide();
$('.box a').click(
function(e){
e.preventDefault();
var newWin = window.open(this.href,'newWindow'),
that = $(this).closest('.box'),
duration = 1200;
if (that.next('.box').length){
that.fadeOut(duration,
function(){
that.next('.box').fadeIn(duration);
});
}
});
What I am having trouble with is:
Creating a "next" button so the user can cycle through to the next div without having the click the image, thus avoiding having to open a new window to get to the next image.
Having a click on the last div redirect the window location to a URL, while still doing the normal function of opening a new window to the a href location if the image is clicked. Otherwise if clicking the "next" button when the last div is shown, simply redirect the user.
What's the best way to go about this? Thanks!
Here is my attempt at tweaking your code to allow for a next button, and my best guess at what you want to happen for the last image:
var redirectUrl = 'http://www.google.com'; // replace in your code
function next(event, duration) {
duration = duration || 1200; // default value
var that = $('.box:visible');
if (that.next('.box').length) {
that.fadeOut(duration, function() {
that.next('.box').fadeIn(duration);
});
} else {
window.location.href = redirectUrl;
// the above line doesn't work inside jsFiddle, but should on your page
}
return false;
}
$('.box').not(':first').hide();
$('.box a').click(
function(e) {
e.preventDefault();
var newWin = window.open(this.href, 'newWindow'),
duration = 1200;
next(e, duration);
});
$('.next').click(next);
jsFiddle example here. Note the redirect is prevented in some browsers since it is running inside an iframe. But it should work in a normal page.
Perhaps look at a slideshow jquery plugin. JQuery Cycle being just one example. There are plenty. Just google jquery Slideshow or jquery cycle and pick the one that suites you best. The cycle plugin itself has a number of "pager" examples that let you change the contents of the displayed picture without leaving the page.
Most of them offer having the contents be html and not just a simple picture so you can play around with what exactly you want.
There's also Fancybox, lightbox, colorbox, etc. if that's what you're trying to accomplish.