I have two domains that are closely related to each other. Because of this I'm putting a fixed box on the top right corner of the page so that users can quickly jump between the two sites. However I would like to add a page transition to this action so that when the user clicks the link in the box the site will gracefully transition to the new URL.
I know you can do this with internal pages via JQuery Mobile ( http://demos.jquerymobile.com/1.1.0/docs/pages/page-transitions.html ), however the limitation is that the link has to be ajax, and can not be activated to new URL's.
Does anyone know how to accomplish this? Ideally I would like to use the "Flow" or "Slide" transition. However I'll take any example or reference you can provide and adapt it to my needs.
The solution does not necessarily need to be jQuery, it can be javascript, HTML 5, CSS or any other solution that may work.
Thanks,
~Andrew
For me it would work something like this:
Pseudo HTML:
<body>
<div id="page1"> <!-- Content goes here --> </div>
</body>
Pseudo JQuery:
on AJAX complete {
var newID
var oldID
if ($('#page1').length) { // Work out old and new ID's
newID = 'page2'
oldID = 'page1'
} else {
newID = 'page1'
oldID = 'page2'
}
$('body').append('<div id="' + newID +'" style="display:none;">' + DataFromAjaxCall + '</div>') // Append the body with a hidden div containing new content
$('#' + oldID).fadeOut(400, function() { // Fade the old one out and then remove it
$(this).remove();
});
$('#' + newID).fadeIn(400); // Fade the new one in
}
Related
Hope you can help out! :)
I'm trying to created an image carousel (Owl Carousel) with dynamic loaded content instead of static code. This dynamic content is generated using jQuery and the Flickr API.
The script you'll find below, retrieves images from a specific Flickr album and converts the data into HTML elements (image + link). Using the $.each(data.photoset.photo, function(i, item){ function I'm creating the carousel's content according the the requirements given.
The issue is, that somehow the jQuery settings from the Owl Carousel don't apply to the dynamic generated content. Using inspect element in the browser, I can see that the content is generated correctly and also some of the carousel's settings are applied to the generated content but it's not showing in the front-end: view screenshot
Note: Converting the dynamic content to static content and inserting it inside the carousel works fine. It looks like the combination of applying a jQuery plugin on dynamic created content using another script is causing the issue.
Code snipped from the <body> (API key required in script):
<body>
<div class="owl-carousel">
</div>
<script type="text/javascript">
function getFlickrImages(setId) {
var URL = "https://api.flickr.com/services/rest/" + // Wake up the Flickr API gods.
"?method=flickr.photosets.getPhotos" + // Get photo from a photoset. https://www.flickr.com/services/api/flickr.photosets.getPhotos.htm
"&api_key=<YOUR-API-KEY>" + // API key. Get one here: http://www.flickr.com/services/apps/create/apply/
"&photoset_id=72157663149819061" + // The set ID.
"&user_id=135343422#N06" +
"&privacy_filter=1" + // 1 signifies all public photos.
"&per_page=10" + // For the sake of this example I am limiting it to 20 photos.
"&format=json&nojsoncallback=1"; // Er, nothing much to explain here.
// See the API in action here: https://www.flickr.com/services/api/explore/flickr.photosets.getPhotos
$.getJSON(URL, function(data){
var owner = data.photoset.owner;
var phot_set_id = data.photoset.id;
$.each(data.photoset.photo, function(i, item){
// Creating the image URL. Info: https://www.flickr.com/services/api/misc.urls.html
var img_src = "https://farm" + item.farm + ".static.flickr.com/" + item.server + "/" + item.id + "_" + item.secret + "_m.jpg";
//var img_thumb = $("<img/>").attr("src", img_src).attr("id", item.id).css("margin", "8px");
var link_src = "https://www.flickr.com/photos/" + owner + "/" + item.id + "/in/set-"+phot_set_id;
var img_link = $("<a/>").attr("href", link_src);
var img_thumb = $('<img />').attr({src:img_src}).appendTo($('<a />').attr({href:link_src,target:"_blank"}).appendTo($('.owl-carousel')).wrap("<div></div>"));
});
});
}
$(document).ready(function() {
getFlickrImages("72157650210689192"); // Call the function!
});
</script>
<!-- OWL CAROUSEL - http://www.owlcarousel.owlgraphic.com/ -->
<script src="owl.carousel.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".owl-carousel").owlCarousel();
});
</script>
</body>
Try adding the line
$(".owl-carousel").owlCarousel();
at the end of the function getFlickrImages(setId).
The issue might be that the owlCarousel setting applied the first document.ready() got called and at that time your dynamic content had not generated. Thus, if you apply the owlCarousel at the end of the function getFlickrImages(setId), your dom content has already been generated and then the carousel would apply.
I fell into the same issue while using another liquid carousel(http://www.nikolakis.net/liquidcarousel/), but applied the same solution as I have described above and it worked.
Hope it helps.
I'm a graphic design student and I'm making a portfolio website. I wanted a lightbox as a way to show my work. I finally got everything working, except for one problem.
Whenever I load my page, the lightbox also loads. I don't want this. I want the lightbox to only show when people click on thumbnails of my work.
I followed this tutorial from Tutsplus because I am not that familiar with jQuery. The only thing I changed in the script was so the lightbox would fade in and fade out when clicking.
This is the code I'm using
</script><script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function($) {
$('.lightbox_trigger').click(function(e) {
//prevent default action (hyperlink)
e.preventDefault();
//Get clicked link href
var image_href = $(this).attr("href");
/*
If the lightbox window HTML already exists in document,
change the img src to to match the href of whatever link was clicked
If the lightbox window HTML doesn't exists, create it and insert it.
(This will only happen the first time around)
*/
if ($('#lightbox').length > 0) { // #lightbox exists
//place href as img src value
var maxheightvalue = $("#lightbox").height() -60;
$("#lightbox img").css("max-height", maxheightvalue + "px");
$('#lightbox').fadeIn(400);
$('#content').html('<img src="' + image_href + '" />');
//show lightbox window - you could use .show('fast') for a transition
}
else { //#lightbox does not exist - create and insert (runs 1st time only)
//create HTML markup for lightbox window
var lightbox =
'<div id="lightbox" style="display:none">' +
'<p>Click to close<\/p>' +
'<div id="content">' + //insert clicked link's href into img src
'<img src="' + image_href +'" />' +
'<\/div>' +
'<\/div>';
//insert lightbox HTML into page
$('body').append(lightbox);
}
});
//Click anywhere on the page to get rid of lightbox window
$('#lightbox').live('click', function() { //must use live, as the lightbox element is inserted into the DOM
$('#lightbox').fadeOut(300);
});
});
//]]>
</script>
I am pretty sure it's a real mess, but so far it's worked except for that one little thing. But if someone could clean it up (if possible) I would be very grateful.
your can try using this example
$(document).ready(function(){
$("#some").on("click", function(){
$("#gallery").lightbox();
});
});
the above is to load the lightbox for ur gallery or desired ID.
http://api.jquery.com/on/
There are six buttons in a grid, each containing a title (h3) and an image.
When one of the buttons is clicked, I'm using jquery to pull the content (title and image) from the selected button and display it (the same title and image) more prominently (with different styling) in a featured section nearby.
In order to make the interaction look/feel smooth, I've added a fadeOut() to the div containing the featured content before the featured content is changed and a fadeIn() after it is changed.
Problem is, the browser processes the commands faster than the featured content can fadeOut(). So it looks pretty bumpy.
In short, my code is written in this order:
Fade out featured section
Change featured content
Fade in with new featured content
But it's happening in this order:
Change featured content
Fade out featured section
Fade in with new featured content
Here's my code:
$('.obst-tile').click(function(){
$(this).parent().children().removeClass('is-selected');
$(this).addClass('is-selected');
$('.obst-feature').fadeOut();
var selectedId = $('.is-selected').attr('id');
var imgLocation = $('#' + selectedId + ' img').attr('src');
var featureTitle = $('#' + selectedId).find('h3').text();
$('.obst-featured-img').attr('src',imgLocation);
$('.obst-desc-headline').text(featureTitle);
$('.obst-feature').fadeIn();
});
Everything works fine (the content updates properly when the button is clicked), so I'm not really looking for help debugging this or for recommendations on how I could do write this in a more concise way. Just trying to figure out how to delay the change of content long enough for the fadeOut to occur.
Thanks in advance for your help!
$.fadeOut() has callback function;
$('.obst-tile').click(function(){
$(this).parent().children().removeClass('is-selected');
$(this).addClass('is-selected');
$('.obst-feature').fadeOut(function(){
var selectedId = $('.is-selected').attr('id');
var imgLocation = $('#' + selectedId + ' img').attr('src');
var featureTitle = $('#' + selectedId).find('h3').text();
$('.obst-featured-img').attr('src',imgLocation);
$('.obst-desc-headline').text(featureTitle);
$('.obst-feature').fadeIn();
});
});
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();
});
I have a navigation list. The effect I am looking for is when the user clicks on a link, an accordion style div is built and displayed by jQuery. Then if the user clicks the same screen, the is deleted from the screen.
Here's some cod that will create an DIV if it is not already there, load it with some HTML from the URL contained in a link's HREF attribute, then turn it into an accordion. If the DIV already exists, it removes it.
$('.navLink').click( function() {
var accordion_id = 'accordion_' + this.id;
var accordion = $('#' + accordion_id);
if (accordion.length > 0) {
accodion.remove();
}
else {
$('<div id="' + accordion_id + '"></div>')
.appendTo('#someDiv')
.load( $(this).attr('href') )
.accordion();
}
return false; // cancel default action of link
});
Yes, I'm quite sure that this is possible. It looks like there may be plugins and third-party tools out there that can help you with this task. This one looks promising: http://jqueryui.com/demos/accordion/