I'm currently trying to implement a dropdown containing months of the year, where the user clicking on a month will load the appropriate range of gallery images via .load().
The AJAX call itself works, but I'm unable to get my plugins to re-initialize on the callback, i.e. the scrollbar does not load.
What adds to my confusion is that the scrollbar will load on the callback ONLY IF I don't use the plugin previously in my main.js .
I'm using the mCustomScrollbar plugin.
Here's the HTML:
<!-- Release Calendar Month Dropdown -->
<div id="dropdown-release">
<ul>
<li>
Month
<ul>
<li id="nov14">November 2014</li>
<li>December 2014</li>
<li>January 2015</li>
<li>February 2015</li>
</ul>
</li>
</ul>
</div>
<div class="gallery"> <!-- ---------- GALLERY BEGINS ------------ -->
<div class="hidden" id="gallery-note">
<p><strong>Note:</strong> Tap gallery items to open<br/>in new tab</p>
</div>
<div class="gallery-img">
<a href="http://www.sneakersnstuff.com/en/product/16752/sneakersnstuff-reebok-inferno-15-stars" target="_blank">
<img class="lazy" src="img/loader.gif" delayedsrc="http://pngsneakerstuff.cachefly.net/images/105882/premium_full.jpg" />
</a>
<p class="imgDescription">November 22nd</p>
<span class="hidden">20141122</span>
</div>
<div class="gallery-img">
<a href="http://sneakernews.com/2014/11/13/bait-x-brooks-chariot-centennial-release-date/" target="_blank">
<img class="lazy" src="img/loader.gif" delayedsrc="http://cdn.sneakernews.com/wp-content/uploads/2014/11/bait-brook-chariot-centennial-3.jpg" />
</a>
<p class="imgDescription">November 22nd</p>
<span class="hidden">20141122</span>
</div>
.........etc
And here my main.js:
// within $(document).ready...
var galleryScroll = $(window).load(function() {
$(".gallery").mCustomScrollbar({
axis: "x",
advanced: { autoExpandHorizontalScroll: true }
});
});
$('#nov14').click(function() {
$(".mCSB_container").load("releases/november/nov.html",function(response,status,xhr){
$(".gallery").mCustomScrollbar("update");
});
});
I've also unsuccessfully tried to solve the issue through .ajaxComplete as suggested here.
Been stuck on this last bit for ages, help would be greatly appreciated! :)
From the plugin site you linked:
update
Usage $(selector).mCustomScrollbar("update");
Which is probably what you want to call in your callback instead of setting the whole thing up again.
Related
I make gallery on my onepage website. I try use show/hide and scrollit
to show more details about my work. But I do not know how to connect it together to make it work.
Here code gallery. When I push it open information about it.
<li>
<a href="#single-project" class="show_hide more" rel="#slidingDiv8" >
<div class="item web-design" data-ref="mixitup-target">
<img src="img/1.png" alt="project 9">
</div>
<div class="caption">
<div class="blur"></div>
<div class="caption-text">
<h6>Amazing Caption</h6>
<p>Whatever It Is - Always Awesome</p>
</div>
</div>
</a>
</li>
Here is Scrolit which I want to put in the code above.
<li><a data-scroll-nav='4'></a></li>
In the start div i have add
<section data-scroll-index='4'>
How do I connect them show/hide and scrollit to work together? Trying for some time and will only show/hide but not scroll.
Are you trying to use Jquery toggle class ? If yes, Jquery trigger can be call like this $(selector).toggle(speed,callback);
Hope this helps
https://jsfiddle.net/pq8ef3dw/
I am green in this area and I am trying to learn while I build a virtual resume for a website I can use to advertise my programming services (my strength lies more with C#, Java and similar languages :')
Something I think would look pretty cool, is if when you click on a link in my side-bar, the content on the page slides out and is replaced with the content on the new page that slides in, in the previous page' place.
I am a bit lost on how to achieve this though and if I have to do a per-page thing, or if I can make one general method in Javascript to take care of it. I am using jQuery and bootstrap.
var main;
main = function () {
$(".sidebar-nav a").click(function() {
<!-- Not sure what to do here -->
<!-- Pseudo Code -->
<!-- find out what element was pressed
slide out content on current page using animate();
slide in content from the element that was pressed using animate(); -->
})
}
$("document").ready(main);
The HTML:
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<h1>Brand</h1>
</li>
<li>
<a href="#">
Index
</a>
</li>
<li>
<a href="#">
About Me
</a>
</li>
<li>
<a href="#">
Resume
</a>
</li>
<li>
<a href="#">
Contact
</a>
</li>
</ul>
</div>
<!-- Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
<p>Grumpy wizards make toxic brew for the evil Queen and Jack.</p>
Toggle Menu
</div>
</div>
</div>
</div>
</div>
Let me know if you need the CSS.
You should use an AJAX technology to seamlessly load another page's HTML contents inline into the document.
The best choice (in my opinion) for this situation is the jQuery function load(), due to it's simplicity and pure convenience. You can also send a callback function, it's easy to implement.
You could then easily implement a CSS animation using the animation attribute.
I have the following code block to acheive a slideshow to navigate different content(list) on click of the navigation buttons. Everything goes fine and works great. But indeed i need an additional feature like the slideshow should run on the load of the page and the buttons to choose the exact position of the slideshow as well. Still I need those button to navigate my slide show. Thanks in advance.
MARKUP
<div class="testimony">
<div class="container">
<ul class="test-con">
<li class="current">
<a class="image-frame" href="">
<img src="http://placekitten.com/g/100/150"></a>
<h5>“ My Test Content 1 ”</h5>
<h6>- Test 1</h6>
</li>
<li>
<a class="image-frame" href="">
<img src="http://placekitten.com/g/100/150"></a>
<h5>“My Test Content 2”</h5>
<h6>- Test 2</h6>
</li>
<li>
<a class="image-frame" href="">
<img src="http://placekitten.com/g/100/150"></a>
<h5>“ My Test Content 2 ”</h5>
<h6>- Test 3</h6>
</li>
</ul>
<ul class="navigator">
<li class="current"></li>
<li></li>
<li></li>
</ul>
</div>
</div>
JQuery
$('.navigator li').click(function () {
var index = $(this).index();
$(this).addClass('current').siblings().removeClass('current');
$('.test-con li').hide();
$('.test-con li').eq(index).addClass('current').fadeIn('slow').siblings().removeClass('current');
});
NOTE: Need to animate width instead of fade animation.
FOR REFERENCE: CHECK THIS
FIDDLE DEMO
jQueryUI provides a lot of facilities to make personalized the js code.
In any case, why don't you try to use a library of js sliders already existing?
What you want to create could increase proportionally with the appeal you want to reach :)
I knew http://www.slidesjs.com/, which makes the same work with the required attention.
Alex
i tried to make pop up images in my responsive gallery, but it seems to me that highslide.js doesn't see the pop up images. Script source http://highslide.com/#installation I use bootstrap and Word Press. I see that images loading but can't appear. I spend much time but don't understand what I've done wrong. Any help will be greatly appreciated!
My site http://b.pusku.com/
<div class="container-fluid">
<div class="row-fluid">
<div class="span12 thumbs_color">
<ul id="thumbs">
<li>
<a href="http://b.pusku.com/wp-content/uploads/2012/11/7.jpg" class="highslide" onclick="return hs.expand(this)">
<img src="http://b.pusku.com/wp-content/uploads/2012/11/test_carusel1.jpg" alt="test_carusel" />
</a>
</li>
<li>
<a href="/">
<img src="http://b.pusku.com/wp-content/uploads/2012/11/test_carusel1.jpg" alt="test_carusel" />
</a>
</li>
</ul>
</div>
</div>
</div>
<script src="<?php bloginfo('template_url');?>/highslide/highslide.js"></script>
<script type="text/javascript">
// override Highslide settings here
// instead of editing the highslide.js file
hs.graphicsDir = '/highslide/graphics/';
</script>
It may be that the hs.graphicsDir setting is wrong. Judging from the way you are inserting the template url in the path for the highslide.js file, my guess is that it should look like this:
hs.graphicsDir = '<?php bloginfo('template_url');?>/highslide/graphics/';
If that doesn't work, there's a FAQ item for it on the Highslide website.
Made some BBcode for phpBB to allow users to post flickr pics with certain tags.
Each photo div in the thread needs to be unique, and the images load when the thread is loaded.
When it comes to the unique DIV, I'm stuck for a way to insert the uniquely named element into the DOM at the point the BBcode is inserted, THEN load the pics. And it appears I can't use PHP in BBcode, nor the templating tags - if I could easily make a unique photo element from the post ID and the flickr tag I'd be laughing. Oh, and I can't touch the template. It's all got to be within BBcode.
So, here's how I make a unique ID:
var flickrUser = "{URL}".split("/")[4];
var tag = "{URL}".split("/")[6];
var photoDIV = flickrUser + "-" + "tag";
Or...there's an element called with a unique post ID just above I could possibly use:
<div id="p61789" class="post bg2">
I tried
var postnumber=$(this).closest('div[class^="post"]').attr('id');
but it always seemed to return the FIRST matching div on the page, not the NEAREST to the point of the BBcode. This element is two "divs" below
<div class = "content">
and below the user posting area there is:
<div id="sig61789" class="signature">
So where I'm completely stuck is navigating to prev() or closest() or parent() or indeed anywhere from the point where I am without having a $(this) link to reference.
So shouldn't something like:
$(this).prev('content').html('<ul class="thumbs" id=photoDIV></ul>');
or even
$(this).html('<ul class="thumbs" id=photoDIV></ul>');
work? Everytime I think I understand jquery it all goes hazy again...
EDIT: More detail added for Pointy:
<div id="p63167" class="post bg2 online">
<div class="inner">
<span class="corners-top">
<span></span>
</span>
<div class="postbody">
<ul class="profile-icons">
<li class="edit-icon">
<a href="posting.php" title="Edit post">
<span>Edit post</span>
</a>
</li>
<li class="delete-icon">
<a href="posting.php" title="Delete post">
<span>Delete post</span>
</a>
</li>
<li class="report-icon">
<a href="report.php" title="Report this post">
<span>Report this post</span>
</a>
</li>
<li class="info-icon">
<a href="mcp.php" title="Information">
<span>Information</span>
</a>
</li>
<li class="quote-icon">
<a href="posting.php" title="Reply with quote">
<span>Reply with quote</span>
</a>
</li>
</ul>
<h3 class="first">
Re: Testing new bbcode - ignore
</h3>
<p class="author">
<a href="viewtopic.php">
<img src="" alt="Post" title="Post" />
</a>by
<strong>
xxx
</strong>» 13 Jun 2011 14:33</p>
<div class="content">
<script>var
APIkey="xxx";head.js("/forum/jflickrfeed/jflickrfeed.min.js","http://jquery-lazy.googlecode.com/svn-history/r14/trunk/jquery.lazy.source.js",function(){var
flickrUser="http://www.flickr.com/photos/xxx/tags/7thjanuary2010/".split("/")[4];var
tag="http://www.flickr.com/photos/xxx/tags/7thjanuary2010/".split("/")[6];var
photoDIV=flickrUser+"-"+"tag";$(this).html('
<ul class="thumbs" id="photoDIV">
</ul>');$.getJSON("http://www.flickr.com/services/rest/?jsoncallback=?",{method:"flickr.urls.lookupUser",url:"http://www.flickr.com/photos/xxx/tags/7thjanuary2010/",format:"json",api_key:APIkey},function(data){$('#cbox').jflickrfeed({limit:30,qstrings:{id:data.user.id,tags:tag},itemTemplate:'
<li>'+'
<a rel="colorbox" href="{{image}}" title="{{title}}">'+'
<img src="{{image_m}}" alt="{{title}}" />'+'</a>'+'</li>'},function(data){$('#cbox
a').colorbox();});});$.lazy([{src:'/forum/jflickrfeed/colorbox/colorbox/jquery.colorbox-min.js',name:'colorbox',dependencies:{css:['/forum/jflickrfeed/jflickrfeed.css','/forum/jflickrfeed/colorbox/example1/colorbox.css']}}]);});</script>
<ul id="cbox" class="thumbs"></ul>
</div>
<div id="sig63167" class="signature"></div>
</div>
</div>
</div>
the problem is you're assuming that the this context when you're executing within the script block is the script block itself, which is incorrect. If there is no context explicitly given, then your context is the window DOM element. Is there any reason you can't move this code to the page level, and initialize all the posts at page load?
$(function() {
$('.post').each(function(i,item) {
console.log(this); //Post DOM element.
//execute your flick retrieval code here.
});
}
Have you tried Javascript's DOM functions to add it?
http://www.javascriptkit.com/javatutors/dom2.shtml
For example, to insert right after the current script, with id "script1":
document.getElementById("script1").parentNode.appendChild( newelement );
You can add raw html too, just set innerHTML of the new element.