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/
Related
how can i create moving div like on this site (on right side of slider) Click to see div on web with javascript or jquery ?
The vertical carousel on this page (http://jquery.malsup.com/cycle2/demo/carousel.php) might help you out.
You can Google for jQuery carousel and you will find a lot of further tutorials and downloads for this.
<div class="slideshow vertical"
data-cycle-fx=carousel
data-cycle-timeout=0
data-cycle-next="#next3"
data-cycle-prev="#prev3"
data-cycle-pager="#pager3"
data-cycle-carousel-visible=2
data-cycle-carousel-vertical=true
>
<img src="http://malsup.github.io/images/beach1.jpg">
<img src="http://malsup.github.io/images/beach2.jpg">
...
<img src="http://malsup.github.io/images/beach9.jpg">
</div>
<div class=center>
<a href=# id=prev3><< Prev </a>
<a href=# id=next3> Next >> </a>
</div>
<div class="cycle-pager" id=pager3></div>
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 would like to create a simple javascript slideshow that allows a user to click 'Previous' or 'Next' and have the element slide in from the right or left depending. Content will be coming in from a CMS, so it's not 'hard-coded' persay. My markup would look like this ideally (where the most recent entry receives the 'show' class):
<span class="back">Previous slide</span>
<span class="next">Next Slide</span>
<div id="slideshow">
<div class="client show">
<p>Yada</p>
</div>
<div class="client hide">
<p>Yada</p>
</div>
<div class="client hide">
<p>Yada</p>
</div>
<div class="client hide">
<p>Yada</p>
</div>
</div><!--end slideshow-->
I need something that will automatically detect order and allow the number of .client classes to be anything. This seems very close: http://jsbin.com/ekecu but I don't want it to be based on visible links to switch, just the same absolutely positioned previous and next buttons.
Would really appreciate some help, or if you were feeling especially generous an source snippet I could use.
Shadow Box or Fancybox?
I am using the toggle() with jQuery and I have a sidebar on my page and each header is
<h2 class="sidebar-header">
One section of my code will look like:
<div class="sidebar-section">
<h2 class="sidebar-header">SUBSCRIBE</h2>
<p class="sidebar">Make sure you subscribe to stay in touch with the latest articles and tutorials. Click on one of the images below:</p>
<div class="rss-icons">
<img src="http://gmodules.com/ig/images/plus_google.gif" width="62" height="17" alt="Add to Google Reader or Homepage" class="feed-image"/>
<img src="http://us.i1.yimg.com/us.yimg.com/i/us/my/addtomyyahoo3.gif" alt="Add feed to My Yahoo" width="62" height="17" class="feed-image" />
<img src="http://www.newsgator.com/images/ngsub1.gif" alt="Subscribe in NewsGator Online" class="feed-image" height="17" />
</div>
<hr />
<p class="sidebar feed">Don't have those? Grab the RSS url.</p>
<p class="sidebar delicious">Make sure you add me to delicious! </p>
</div>
They are each wrapped in those DIV elements. I am trying to make it for if you click the header, it will shrink up the content. I know toggle can do that, but if I make it for each "sidebar-header", you will click any one element on the page and it will hide them all, how can I do this?
Try something like this:
Suppose you have the following code:
<div class="topdiv">
<h2 class="header">Header 1</h2>
<div class="somecontent">
This is the content
</div>
</div>
<div class="topdiv">
<h2 class="header">Header 2</h2>
<div class="somecontent">
This is the content
</div>
</div>
Now, say that when you want to click on a header, the content of that header is displayed / hidden:
$(".header").click(function () {
$(this).parent(".topdiv:first").find(".somecontent").toggle();
});
This way, only the content of the particular header will be toggled, and not the rest.
Now you can analyze the code I have written for you, and apply it in your own context.
Try this:
nextAll
$(".sidebar-header").click(function() {
$(this).nextAll().toggle();
});