I'm making portfolio site, where I have a slider for each project and inside it there is second slider for different images.
Sliders working fine but can't make the button "myBabel" disappear when viewing "myBerlin".
Also, I can't add second button to make the "myBerlin" slider work.
I want to add one button that either controls all the inside sliders (the slidshow that contains are controlled by left and right screen buttons) by one button in the middle or one button per inside slider that moves with it.
I tried adding "myBerlin" to the onclick="myBabel();..." but then my sliderscript doesn't work anymore and skips most of my images. I also tried adding the button in the slider itself but doesn't work.
Anyone has a solution? I tried different solutions already.
https://jsfiddle.net/r87dc1j5/
Related
Whenever I navigate on my Card slider, my half slider (separate carousel) also moves. But it's interesting that it does not happen the other way around. When I navigate my half slider, my Card slider does not move. I think it has something to do with my Javascript but I don't know how to separate them in classes so they work separately since the half slider has a separate code for navigation.
Attached are the code, I just put parts of my html code for the half slider and card slider and the javascript that I think is causing the problem.
Half Slider.html
Card Slider.html
JScript.js
In the JavaScript, your jQuery click event handlers trigger a function which targets any element with the class 'carousel' which exists in both sliders.
The reason why your half slider doesn't do the same thing is because it uses data-slide instead of the jQuery click event (which targets the 'next' and 'previous' classes).
I am learning Bootstrap, and I am stuck at creating a sidebar panel just like the following:
There are two things I have not figured out how to do.
In the above image, when you click on the "+" icon, this section slides down. Should I specify some properties in CSS as to when it is clicked or in javascript/jquery?
I want to have exactly 5 checkboxes and the rest should be seen through a slider, like sliding down. I tried to do it but the section just keeps getting longer:
This is what I have done so far. I just wanted to test if it will work.
I am new to this and I do not know JavaScript or jQuery. I want to strengthen Bootstrap first and then will go for Javascript.
I have made this website here: http://dijon-egg.com/Possum/
If you click on green big dot button, it takes you to page2. My problem is I can't figure and fix the menu being too big on page 2 or change view of carousel on page 2 so full carousel can show to us.
As I looked at your source code, I guess you should somehow add the .cbp-af-header-shrink class back to the header, when you click the green button.
I have looked all over for a solution but can't find anything specific and I know it is very doable but I think my lack of experience with JavaScript is limiting me here.
Essentially I have 5 divs, each one acts like a button. I want each button to make another div unrelated to the 5 buttons to appear. I called them "Menubox1/2/3/4" and each one is linked to each one. My first idea was to have all the menus stacked on top of each other with a blank one on top with a z-index of 5.
And then by using the "onclick" method on the div button, I would tell it to get the element of its respective menu and increase its z-index to 6, to go on top of the pile. I would also tell it to make all the other menus go to 4, to go below the rest.
So effectively each button would make the menu associated with it appear on top with the highest z-index and also hide the other menu boxes so that no other box is on the same level.
I have found a way to make it work with this JS
//Shows the current menu on top
function showstuff(boxid) {
document.getElementById(boxid).style.zIndex="5";
}
//Hides the rest of them.
function hidestuff(boxid) {
document.getElementById(boxid).style.zindex="3";
}
<div onclick="showstuff('Menu1'); hidestuff('Menu2'); hidestuff('Menu3');" ;style="cursor:pointer;">
And by putting the respective boxid in the "onclick" , it all works but the problem is it only works once, and I need it to work every time each one is clicked.
If anyone needs more information I an provide.
Why don't you just use visibility:hidden/visible on the panes you want to hide/display? It would require resetting that attribute on each pane on each click, but you don't have to worry about how browsers render z-index, or if there are any times in rendering where you get a weird display of multiple divs rendering when only one should.
Did anyone got the chance to get multiple JSliderNews instances working on one page?
I'm using different selectors for the two sliders - still the behaviour is:
Both sliders are rendering fine, no JavaScript errors, everything seems fine.
But using the navigation items only will move the slides on the second slider. Using the navigation on the second slider will only move the second slider - so first slider is dead, except it controls the second one.
I can't figure out why I can't have two instances of the same plugin on one page...
JQuery plugin: http://www.landofcoder.com/demo/jquery/lofslidernews/
I'm using JQuery 1.7.0