This is a new question and I mentioned it in my previous one here just to save posting the code again.
I don't want to start over so I was wondering how I'd go about making the navbar collapse but in an animated way, the code I have works but the navbar still doesn't collapse when clicked off. Would this also be done with bootstrap?
Completely new to bootstrap animations and I can't find any libraries with good instructions or examples. Any links would be appreciated, as well as a fix to my header issue.
Thanks in advance.
Vist this link they have listed 9 libraries, when you click on the link of library it will redirect you to github and there in ReadMe they have given explanation related to the library.
Related
I need this kind of behavior like when we click on make we can open the next model list in the same section
Please can you help me with how I can achieve this?
Im not sure about vanilla js but u can achieve this in ReactJS using react-router-dom package. you can add Link to each section which will replace that modal in the section without page reloading/refreshing.
Edit:
I have 2 ideas to to this with vanilla js but its a bit complicated and confusing.
using appenChild() change section child with onclick.
adding display: none to all and changing display: block for the once to display
this will not change reload or take to new page but u will need to add js for onclick for each route/model
<https://codepen.io/samyakjain20/pen/dyMmaYj>
This is what I tried!, tried to integrate two slider designs mentioned below. The gesture animation which is there in the 1st link is not working in my slider.
https://codepen.io/codewunder/pen/Bnspb/
https://codepen.io/maheshambure21/pen/qZZrxy
I think the error is in JavaScript but I don't know how to solve. If you have seen something similar to this then also please mention it.
Just click in the cog icon on the JavaScript panel, and add the jQuery CDN link https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
This error is because the jQuery library is not found in your code.
I am wondering how to replicated the same modal window components used on Lonely Planet: http://www.lonelyplanet.com/interest/family-travel/best-of-family-travel/content/travel-tips-and-articles/2550
So when you click on one of the listed thumbnails you will see the modal window with the arrows which on hover state displays the preview image. I am trying to recreate the same plugin with Zurb Foundation or plain JS, jquery which at the end will be implemented into Wordpress. I know this is not the platform to ask this kind of questions but yeah. I don't know where to start.
If you have any suggestions of plugins or whatsoever please let me know.
Thanks in advance!
If you want to create your own plugin using Zurb Foundation, you can get an idea from the following code.
http://codepen.io/shoaibik/pen/GZaOGV
$(function(){
$("#exampleModal2").foundation('open');
$('.nav').click(function(){
if($(this).hasClass('prev')){
if($(".reveal-overlay:visible").prev().find('.reveal').length){
$(".reveal-overlay:visible").prev().find('.reveal').foundation('open');
} else{
$(".reveal-overlay:last").find('.reveal').foundation('open');
}
}else{
if($(".reveal-overlay:visible").next().find('.reveal').length){
$(".reveal-overlay:visible").next().find('.reveal').foundation('open');
}else{
$(".reveal-overlay:first").find('.reveal').foundation('open');
}
}
});
});
If you want to use plugin you can use slick slider and customize it to your needs.
http://kenwheeler.github.io/slick/
I'm developing a dashboard that end-users can edit specific web page by uploading different picture and editing text in the page. The similar ideas is here.
I'd already done with web page design and I'm looking for suitable js library to make editable dashboard for end-users. Anyone has suggestions for that or if no current solution => how to implement these features? no idea about that ...
Very Thanks!
You can have a look on :
http://madebymany.github.io/sir-trevor-js/
http://innovastudio.com/content-builder.aspx
http://etchjs.com/
http://jakiestfu.github.io/Medium.js/docs/
http://createjs.org/
http://www.jqueryrain.com/demo/jquery-wysiwyg-editor/
and use the one(s) that most suit you. In case you did not find the one that completely suits to your project then you can make additions (such as adding modal windows or css styling) to hte one(s) which is more preferable.
Hope this was helpfull.
I've been trying for weeks to build a navigation sidebar like these images:
I'm using twitter bootstrap, however, even though their getbootstrap.com/components has a very good looking navigation sidebar, there is no such component in their library and it is so much pain to build one. Therefore, I resorted to using jquery in my attempt to build one like the Tommy Hilfiger's global site.
Tommy Hilfiger's Global Site
However, I'm new with javascript and css... they are my weakpoints... especially if they are minified :( and I'm stuck at trying to make the arrow marker and have it move along (animating) and always pointing to the current section. I managed to animate the page scrolling though, and my WIP so far is here:
WIP - Twitter Bootstrap Navigation Sidebar
Is there any open source components (or preferably bootstrap ones) to achieve that section indicator animation?
I'm so confused with my scripts that are getting messier, so open source component is highly desireble, however, any input on how to achieve it (with script example please) will also be appreciated.. Thank you very much in advance!
Check out ScrollSpy, the component exist on bootstrap itself:
bootstrap scrollspy
extracted from:
https://stackoverflow.com/a/14366014/474330
So you need to use the scroll spy activate event described here:
http://twitter.github.com/bootstrap/javascript.html#scrollspy
Basically you need some code like so:
$(function() {
var $spy = $('.nav.nav-pills');
$spy.scrollspy({offset: 20});
$spy.bind("activate", function(e) {
// do stuff here when a new section is in view
});
});
Here is a working example:
http://jsfiddle.net/hajpoj/f2z6u/3/
please ignore the fact that it starts at the bottom... not sure if that a unrelated or related bug, but the main point is you can see how the activate event works