Update: this is not loading annything: What is wrong with this code?
<script type="text/javascript" src="http://static.tumblr.com/snscsmd/Z3ln6cev3/jquery.infinitescroll.min.js"></script>
<script type="text/javascript">
$('#content').infinitescroll({
// infinite scroll settings
}, function(newPosts){
$(newPosts)
.wrapAll('<div class="photoset-grid">') //wrap them in place
.parent() //get .photoset-grid
.photosetGrid({
//photoset grid settings
});
});
</script>
My problem is to combine Infinite Scroll with Photoset Grid. I need a callback but I am not sure how to implement it.
Website: http://sindreolsson.tumblr.com/
HTML
{block:Photoset}
<div class="photoset-grid" data-layout="{PhotosetLayout}" data-id="photoset{PostID}" style="visibility: hidden;" />
{block:Photos}
<img src="{PhotoURL-500}"
{block:HighRes}data-highres="{PhotoURL-HighRes}"{/block:HighRes}
width="{PhotoWidth-500}" height="{PhotoHeight-500}"
{block:Caption}alt="{Caption}"{/block:caption} />
{/block:Photos}
</div><!-- /.tumblr-photoset -->
{block:Caption}<div class="photoset-grid-copy">{Caption}</div>{/block:Caption}
{/block:Photoset}
Script:
<!--Photoset-grid script -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://static.tumblr.com/mviqmwg/XyYn59y3a/jquery.photoset-grid.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.photoset-grid').photosetGrid({
rel: $('.photoset-grid').attr("data-id"),
gutter: '0px',
onComplete: function(){
$('.photoset-grid').css({
'visibility': 'visible'
});
}
});
});
</script>
<!-- /Photoset-grid script -->
This should pull the new posts and wrap them in a new div.photoset-grid. At that point you can just call .photosetGrid() with your settings.
$('#content').infinitescroll({
// infinite scroll settings
}, function(newPosts){
$(newPosts)
.wrapAll('<div class="photoset-grid">') //wrap them in place
.parent() //get .photoset-grid
.photosetGrid({
//photoset grid settings
});
});
Previous answer
It's not too clear on Infinite Scroll's repo, but on
infinite-scroll.com you can see the
callback in their second example. Here's a partial solution using
that callback:
$('#content').infinitescroll({
//settings
}, function(newPosts){
//MISSING: reset photosetGrid
$('.photoset-grid').photosetGrid();
});
Unfortunately it seems that an "update" or "reset" method is missing
for Photoset Grid, so perhaps open an issue in their
repo and hope
that if someone adds the functionality, it happens in time.
Alternatively you can look for a different script.
Related
My question is how to trigger or call a function after an element has been loaded or element on the page and don't want to wait for the full page load.
Example Fiddle: http://jsfiddle.net/8bJUc/275/
Problem Fiddle: http://jsfiddle.net/8bJUc/274/
Call JS:
document.getElementsByClassName("owlCarousel").onLoad = function(){
// do stuff
$("#owl-demo").owlCarousel({
navigation: true,
pagination: true,
lazyLoad: true
});
};
HTML:
<span class='slide'>
<div id="owl-demo" class="owl-carousel"> <!-- If .owl-carousel has been loaded -->
<div>
<!-- Contents -->
</div>
</div>
</span>
So i mean that if .slide has .owl-carousel class then call function will be work.
Expecting suggestions?
The div is loaded almost inmediately when the body loads. It has no onload event and the only way to execute a script just after it finished loading is appending the script just after it in the DOM (as some other answers suggested).
Fiddle with this option implemented.
Note that you need to wrap the script in the header of your page in order to make things work (look at the jsfiddle options I set)
In your HTML it'd look like
<head>
... rest of your stuff ...
function launchScript() {
// do stuff
$("#owl-demo").owlCarousel({
navigation: true,
pagination: true,
lazyLoad: true
});
}
</head>
And then:
<div id="owl-demo" class="owl-carousel"> <!-- If .owl-carousel has loaded-->
...
</div>
<script>
launchScript();
</script>
How about this:
$(function(){
if ($('.slide .owl-carousel').length){
//call function
}
});
If it needs to be done as soon as possible, you could manually invoke it immediately after the element it relies on is defined.
function asap() {
// ...
}
<div id="owl-demo" class="owl-carousel">
<!-- ... -->
</div>
<script>
asap();
</script>
Example fiddle (open your console)
I am new to coding and need help with jQuery. I have 2 <div>s (one with an image, the other with a menu list, both 50% width) and I need to be able to click one of the menu options to make a new div (50% width) appear from the right while reducing the other 2 divs width to 25% each. Then clicking on the same menu option to hide the new div and revert back to the original widths. But if I click on another menu option while the new div is visible, I need it to change the content to that specific menu option content.
How can I swap the left-hand <div> out with jQuery?
Here's the HTML I'm working with:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<!-- SCRIPT FILES -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="script.js"></script>
<!-- CSS STYLESHEETS -->
<link rel="stylesheet" href="reset.css" type="text/css" />
<link rel="stylesheet" href="main.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
</div><!--header-->
<div id="container">
<div class="box-container">
<div class="box1">
<img src="images/Untitled-1.png" alt="logo">
</div>
<div class="box2">
<div id="nav">
<ul>
<li><a>hello!</a></li>
<li><a>ADVERTISING</a></li>
<li><a>DESIGN</a></li>
<li><a>ABOUT</a></li>
<li><a>BLOG</a></li>
<li><a>SHOP</a></li>
</ul>
</div><!--nav-->
</div><!--box2-->
<div class="box3">
<div id="ADVERTISING" class="content">ADVERTISING</div>
<div id="DESIGN" class="content">DESIGN</div>
<div id="ABOUT" class="content">ABOUT</div>
<div id="BLOG" class="content">BLOG</div>
<div id="SHOP" class="content">SHOP</div>
</div>
</div><!--box-container-->
</div><!--container-->
<div id="footer">
</div><!--footer-->
</div><!-- wrapper-->
</body>
</html>
Here's a working jsFiddle with the styles: http://jsfiddle.net/YcphY/6/
For starters, here's a method that ties the below examples of how to do this into the animation you're after:
$(function() {
$("#nav").delegate("li","click", function() {
var newDiv = $(".box3 .content").eq($(this).index()-1);
newDiv.siblings().hide().end(); // hide the others
if(newDiv.is(":visible")) {
// if shown, fade it out, when the fade finishes, slide everything back
newDiv.fadeOut(function() {
$(".box3").hide();
$(".box1, .box2").animate({ width: "50%" });
});
} else {
// if not shown, then slide over space, then fade in
$(".box1, .box2").animate({ width: "25%" }, function() {
$(".box3").show();
newDiv.fadeIn("fast");
});
}
});
});
Given your current CSS you can do this:
$(function() {
$("#nav").delegate("li a","click", function() {
$(".box3").show();
$("#" + $(this).text()).show().siblings().hide();
});
});
Here's a working example, though you can see the CSS will need a bit of work to get it going 100%. I suggest a few changes though: give your links and containers matching IDs, like this:
<li><a id="ad">ADVERTISING</a></li>
<div id="ad-container" class="content">ADVERTISING</div>
Then the JS can be:
$(function() {
$("#nav").delegate("li a","click", function() {
$(".box3").show();
$("#" + this.id + "-container").show().siblings().hide();
});
});
Here's a working example of that...it allows you to change the text at will and not worry about the JS breaking later. Another alternative yet is to go off the index of the link in the list using .index() of the <li>, if the number of links was consistent with the <div>s in all cases, even if there's an offset because of the "hello!" link.
Here's an example of an index approach with your current HTML:
$(function() {
$("#nav").delegate("li","click", function() {
$(".box3").show();
$(".box3 .content").hide().eq($(this).index()-1).show();
});
});
I think jQuery's animate function might be of use to you.
What you'd need to do is either have a hidden div positioned out of the window added to your HTML (or maybe add it dynamically using jquery on document.ready event, if you prefer) and the use the above mentioned animate function to slide it in and out and bind it to the menu item's click function.
Sample Code
$(document).ready(function(){
$('#slide').click(function(){
var hidden = $('.hidden');
if (hidden.hasClass('visible')){
hidden.animate({"left":"-1000px"}, "slow");
hidden.removeClass('visible');
} else {
hidden.animate({"left":"0px"}, "slow");
hidden.addClass('visible');
}
});
});
Explanation
In the above code we are binding code to the click event of an element with a id "slide". Once the element is clicked the code gets initiated. We check if the .hidden has a css class called "visible". If not we animate the hidden div to slide in. and if it has a visible class then slide it out.
Working Fiddle
Here is a working JSFiddle for you
Some pointers
In the hidden div's CSS remember to specify a z-index greater than that of the current left panel.
In the hidden div's CSS remember to set position to absolute and left to around -1200px (or greater than window.width() to make it work on all screen sizes.)
I have a number of names in a list like so:
<div class="names">
<ul>
<li>name1</li>
<li>name2</li>
<li>name3</li>
<li>name4</li>
<li>name5</li>
</ul>
</div>
I would like to display next to the cursor an image thumbnail which relates to each name on mouse hover. Is this possible with jquery?
Thanks heaps. Pia
Here is a basic implementation of hover popup:
$('.names a').on('mouseenter', function(evt){
$('.popup').css({left: evt.pageX+30, top: evt.pageY-15}).show();
$(this).on('mouseleave', function(){
$('.popup').hide();
});
});
http://jsfiddle.net/CaQUY/
You can alter contents of the popup based on which element is hovered (for example, by using http://api.jquery.com/jQuery.data/ )
Example of using data attribute: http://jsfiddle.net/CaQUY/1/
Here is a javascript solution to show image thumbnail on hover.
<p id="p1">Cnet</p>
<p id="p2">Codegena</p>
<p id="p3">Apple</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<link href="https://codegena.com/assets/css/image-preview-for-link.css" rel="stylesheet">
<script type="text/javascript">
$(function() {
$('#p1 a').miniPreview({ prefetch: 'pageload' });
$('#p2 a').miniPreview({ prefetch: 'parenthover' });
$('#p3 a').miniPreview({ prefetch: 'none' });
});
</script> <script src="https://codegena.com/assets/js/image-preview-for-link.js"></script>
If you want to know more on how to use it visit "Show image thumbnail on hover"
I want to hide google's +1 button after the user clicks on it using jQuery; this is the code I'm using but it seems it's not functioning properly:
JS:
$(function() {
$("#button").click(function()
{
$(".HIDE").hide();
});
return false;
});
HTML:
<div class="HIDE">
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="small" class="plusone"></g:plusone>
</div>
Use the +1 tag callback parameter to fire the hide function. There's probably a better way to select the +1 button but this works for the purpose of a demo.
<g:plusone size="tall" callback="poHide"></g:plusone>
<script src="http://apis.google.com/js/plusone.js"></script>
<script>function poHide(){ $("#___plusone_0").fadeOut(); }</script>
Demo: jsfiddle.net/Gju6T
You may want to try the HTML5 equivalent syntax:
<div class="g-plusone" data-size="standard" data-count="true"></div>
All in all, the rendered HTML will be the thing to look at.
I think this is what you need, but put it at the end of your page just above </body>
$('g\\:plusone').live('click',function (){
$(this).remove();
});
ELSE
try this...
$('iframe').contents().find('#plusone').live('click',function (){
$(this).remove();
});
orrr
<script>
function mycall(str){
console.log(str);
//$(str).hide();//???
}
</script>
<g:plusone size="small" class="plusone" callback="mycall"></g:plusone>
The button is rendered into an iframe you don't have access to. The <g:plusone> tag is replaced by JS with an iframe and you cannot observe this button via jQuery, for example with live() or bind(). You have to use the API of the button which can be found here.
There you find the option "callback" you could use like this:
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{"parsetags": "explicit"}
</script>
<script type="text/javascript">
// Call the API method after the page loaded
$(document).ready(function() {
gapi.plusone.render("HIDE",
{"size": "standard", "count": "true", "callback" : "hideTheButton"});
});
// Method to remove the element
function hideTheButton() {
$("#HIDE").hide();
}
</script>
<div id="HIDE">
<g:plusone></g:plusone>
</div>
can anyone help me fix this, what am I missing?
<script type="text/javascript">
$('#loginButton').click(function() {
$('#toplogin').animate({
height: '0px'
});
});
</script>
The onClick doesn't even execute!
The div I want the onClick event to work on is here:
<div id="loginButton">Login »</div>
The div I want the animation to affect is here:
div id="toplogin"> <!-- more stuff --> </div>
Remove the semicolon after height: '0px' to make your JavaScript valid.
<script type="text/javascript">
$('#loginButton').click(function() {
$('#toplogin').animate({ height:'0px' });
});
</script>
However, unless you have overflow:hidden set for #toplogin the element will still be visible, even though it's height is 0px. An easier way is just using slideUp().
<script type="text/javascript">
$('#loginButton').click(function(){ $('#toplogin').slideUp(); });
</script>
try this:
$('#loginButton').click(function() {
$('#toplogin').animate({
height: 0
},
function() {
$(this).css('display', 'none');
});
});
you should wrap your code in following construction to make it valid as jQuery code:
$(document).ready(function(){
your code;
})