We Keep Coding

How to make sidebar fixed (without using actual "fixed" property) with javascript?

I’m a beginner and I’m stuck. And I would really use some help. Have two questions regarding js.
Namely, I have a sidebar on the left that has a toggle option. In order to solve the problem of keeping my sidebar in sight when scrolling, I added javascript code that constantly raises it to the top of the page. But that doesn't seem like the optimal solution.
Is there a way to use javascript to set the menu to be fixed to the top of the page whenever the toggle is open.
Here is the following js code:
$(function() {
var $sidebar = $("#menu"),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 60;
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$sidebar.stop().animate({
marginTop: $window.scrollTop() - offset.top + topPadding
});
} else {
$sidebar.stop().animate({
marginTop: 0
});
}
});
});
Here is the html:
<!-- Sidebar -->
<div class="bg-light border-right" id="sidebar-wrapper" style="background-image: url('geogebra6.png'); scroll-margin: 120px;"> <!--Dodao side baru scroll marginu -->
<div class="sidebar-heading">Sadržaj</div>
<div class="list-group list-group-flush" style="background-image: url('geogebra1.png');" id="menu">
<b>1. Uvod</b>
<b>2. Realni nizovi </b>
<!-- class="dropdown-toggle" style="color: black; "-->
<b>3. Funkcionalni nizovi</b>
<ul class="collapse list-unstyled" id="homeSubmenu" >
<li>
<b>3.1. Obična konvergencija</b>
</li>
<li>
<b>3.2. Ravnomerna konvergencija</b>
</li>
</ul>
</div>
</div>
Of course, using position:fixed does not get the job done because it breaks the flow and mu side bar has the toggle option.
While we are here, is there any way of editing this line of code to make sidebar closed by default and then to open when clicked on the button? I've tried several different solutions but none of them seems optimal.
Here is the code in question:
<!-- Menu Toggle Script -->
// $("#wrapper").toggleClass("toggled");
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
Here is the actual link of the site:
http://alas.matf.bg.ac.rs/~ml05184/

Two jquery ui tabbed divs on one page. One works, the other doesn't

I have a page with two div panels, a left and a right. Both panels are tabbed using jquery-2.1.4.min.js and jquery-ui.js. One panel has three tabs, and it works.
The js in the head of my page looks like this:
$(function(){
// Doesn't matter if following two lines are reversed. Same output.
$( "#property-card" ).show().tabs(); // this one doesn't work
$( "#tabs" ).show().tabs(); // this one works
});
The html looks like this:
//This tabbed content works:
<div id="tabs">
<ul>
<li>Tasks</li>
<li>Notes</li>
<li>Photos</li>
</ul>
<div id="tabs-1">
<!-- Tasks -->
</div>
<div id="tabs-2">
<!-- Notes -->
</div>
<div id="tabs-3">
<!-- Other -->
</div>
The other div panel looks something like this:
//This one shows hyperlinked text within the content area, instead of showing tabs
<div id="property-card" class="eight columns light-manilla curved10 border-dark border-2 border-ridge padding-1-percent">
<ul>
<li>Property</li>
<li>Help</li>
<li>List Price</li>
<li>Taxes</li>
<li>HOA</li>
<li>Showing Instructions</li>
<li>BPO Values</li>
<li>Buyer Leads</li>
</ul>
<div id="property">
</div>
<div id="property-help">
</div>
<div id="property-list-price">
</div>
<div id="property-taxes">
</div>
<div id="property-hoa">
</div>
<div id="property-showing-instructions">
</div>
<div id="property-bpo-values">
</div>
<div id="property-buyer-leads">
</div>
</div>
(not sure if this is related) Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help http://xhr.spec.whatwg.org/jquery-2.1.4.min.js:4:14346
ReferenceError: data is not defined
(I think this one is related) jquery-2.1.4.min.js%20line%202%20%3E%20eval:35:1
See inline screen shot sample for example of what's going on.

Hate answering my own questions, but in another file at the bottom of my html, there is another javascript block, which "activated" the working tabbed div, but because I didn't add the new tabbed div (because I didn't realize that second javascript block was there) the second tabbed div didn't work. Here is what made it work:
$(function () {
$('#property-card').tabs({
activate: function (event, ui) {
var $activeTab1 = $('#property-card').tabs('option', 'active');
}
});
$('#tabs').tabs({
activate: function (event, ui) {
var $activeTab2 = $('#tabs').tabs('option', 'active');
if ($activeTab2 == 2) {
// HERE YOU CAN ADD CODE TO RUN WHEN THE SECOND TAB HAS BEEN CLICKED
$("#mls-images-carousel").css("display","block");
retrieveAssetImages('<?php echo $as_id; ?>');
}
else{
$("#mls-images-carousel").css("display","hidden");
}
}
});
});

Jquery show hide div when click on link

I am trying to show hide div blocks depending on the link on which it click. By default all div will hide. All helps are appreciated.
HTML Code -
<div class="singleFlights">
<div class="itinerarySummary">
<div class="itineraryMenu">
<ul class="list-inline">
<li>Flight itinerary</li>
<li>Fare rules</li>
<li>Baggage Information</li>
</ul>
</div>
<div class="itineraryPanel">
<div id="flight-itinery" class="itineraryPanelItem">
<!-- Content Here -->
</div>
<div id="fare-rules" class="itineraryPanelItem">
<!-- Content Here -->
</div>
<div id="baggage-info" class="itineraryPanelItem">
<!-- Content Here -->
</div>
</div>
</div>
</div>
<div class="singleFlights">
.....................
.....................
</div>
Requirements -
By default 'itineraryPanel' div hide.
If user click on 'Flight itinerary' link under 'itineraryMenu' the div 'itineraryPanel' will show (slide down)with 'itineraryPanelItem' item div. Others div '#fare-rules' and '#baggage-info' will hide. Same will be happen when click on Fare rules and Baggage Information also.
I try with -
$(document).ready(function(){
if($('.flightListing').length > 0){
$('.singleFlights').each(function(){
$('.itineraryMenu ul.list-inline li a').click(function(){
});
});
}
});
I am using bootstrap3. Note that I dont want to show 'itineraryPanel' div until user not click of any link. and after click 2nd time on same link open div slide up and hide.
Here is the live code after included of Vincent G codes - http://45.114.142.104/design//test/cloud/flight-listing-1-n.html

Here's a way to do it with jQuery and data-href elements
See this fiddle
$(function(){
$(".list-inline a").click(function(){
hrefId = $(this).data('href');
$('.itineraryPanelItem').slideUp();
if($(hrefId).is(':visible')){
$(hrefId).slideUp();
}else{
$('.itineraryPanel').show();
$(hrefId).slideDown();
}
});
});
EDIT
With multiples content, you have to use class instead of id
See this updated fiddle
$(function(){
$(".list-inline a").click(function(){
hrefClass = $(this).data('href');
$(this).parents('.singleFlights').find('.itineraryPanelItem').slideUp();
if($(this).parents('.singleFlights').find($(hrefClass)).is(':visible')){
$(this).parents('.singleFlights').find(hrefClass).slideUp();
}else{
$(this).parents('.singleFlights').find('.itineraryPanel').show();
$(this).parents('.singleFlights').find(hrefClass).slideDown();
}
});
});

The slideshow and the zoom function is not working anymore of fetching content

I have an images slideshow which each images can bee zoomed in the slideshow. And all the codes I used was working fine before I added some change there.
Here is the working code:
<div id="leftBigWraper"><!-- Example -->
<div id="bigPicture">
<div class="easyzoom easyzoom--overlay">
<p></p>
<img src="colour/big/Evan-Picone-Turtleneck-Sweater-Dress__01688224_balired_1.jpg" alt="" width="100%"/></div>
<div class="easyzoom easyzoom--overlay">
<p></p>
<img src="colour/big/Evan-Picone-Turtleneck-Sweater-Dress__01688224_balired_2.jpg" alt="" width="100%"/></div>
</div>
<div id="smallPicture">
<img src="colour/thumnail/Evan-Picone-Turtleneck-Sweater-Dress__01688224_balired_1.jpg" width="100%">
<img src="colour/thumnail/Evan-Picone-Turtleneck-Sweater-Dress__01688224_balired_2.jpg" width="100%">
</div>
</div><!-- End of Example -->
<!--End of Wraper in the Left Side (Product Images)-->
In the working code, all the content in the #bigPicture div is set maually, and the slideshow is run by this script:
var $el = $('#leftBigWraper'),
// SETUP ////////
F = 600 , // Fade Time
P = 5000 , // Pause Time
C = 0 , // Counter / Start Slide# (0 based)
///////////////////
$sl = $('#bigPicture > div'),
$th = $('#smallPicture > img'),
N = $sl.length,
T = 10000;
$sl.hide().eq(C).show();
$th.eq(C).addClass('on');
// ANIMATION
function anim() {
$sl.eq(C%N).stop(1).fadeTo(F,1).siblings().fadeTo(F,0);
$th.removeClass('on').eq(C%N).addClass('on');
}
// AUTO ANIMATE
function autoAnim() {
T = setTimeout(function() {
C++;
anim(); // Animate
autoAnim(); // Prepare another iteration
}, P+F);
}
autoAnim(); // Start loop
// HOVER PAUSE
$el.hover(function(e) {
return e.type==='mouseenter'? clearTimeout( T ) : autoAnim();
});
// HOVER THUMBNAILS
$th.on('mouseenter', function() {
C = $th.index( this );
anim();
});
THE WORKING FIDDLE
However, when all the contents in the #bigPicture div are set by calling it from hidden div and with Jquery, the slideshow and the zooming function is not working anymore.
The Jquery that I used to fill the blank div from the hidden div is here:
$(document).ready(function(){
$('#bigPicture').html($('#pilihWarna li #bigHidden:first').html());
$('#smallPicture').html($('#pilihWarna li #smallHidden:first').html());
$('#pilihWarna li').click(function(event) {
$('#bigPicture').html($(this).find('#bigHidden').html());
$('#smallPicture').html($(this).find('#smallHidden').html());
});
});
As follows:
First, I left the div of #bigPicture to be blank or without any content in there.
<!--Wraper in the Left Side (Product Images)-->
<div id="leftBigWraper"><!-- Example -->
<div id="bigPicture"></div>
<div id="smallPicture"></div>
</div><!-- End of Example -->
<!--End of Wraper in the Left Side (Product Images)-->
Then, I create some hidden div that will transfer all the contents insede the div to the #bigPicture div.
<ul id="pilihWarna" style="">
<li><img src="colour/thumnail/Evan-Picone-Turtleneck-Sweater-Dress__01688224_balired_1_7.jpg" width="10%">
<div id="bigHidden">
<div class="easyzoom easyzoom--overlay">
<p></p>
<img src="colour/big/Evan-Picone-Turtleneck-Sweater-Dress__01688224_balired_1.jpg"></div>
<div class="easyzoom easyzoom--overlay">
<p></p>
<img src="colour/big/Evan-Picone-Turtleneck-Sweater-Dress__01688224_balired_2.jpg"></div>
</div>
<div id="smallHidden">
<img src="colour/thumnail/Evan-Picone-Turtleneck-Sweater-Dress__01688224_balired_1.jpg">
<img src="colour/thumnail/Evan-Picone-Turtleneck-Sweater-Dress__01688224_balired_2.jpg">
</div>
</li>
The ul which its id is #pilihanWarna has at least 5 li, which I used as clickable menus that I have been discussing here
That's when the slidshow and the zooming images functions are not working anymore.

You're using the same IDs multiple times, IDs should be unique. Given multiple elements with the same ID:
<div id="foo">One</div>
<div id="foo">Two</div>
<div id="foo">Three</div>
Searching the DOM for the elements will only ever return the first instance:
document.getElementById('foo'); // returns <div id="foo">One</div>
Start by removing the duplicated IDs and using a different selector (a class probably, but you could just use an element selector too) and then you might be getting somewhere.

Using jquery to toggle div when parent div is visible

I have several parent div tags with same class which contain two children divs one of which is hidden. Only one parent is shown at a time. I have a button which moves through the parent one at a time by show the next and hiding the previous. A second button has to toggle the two children divs of a parent when its visible, it however only works for the first parent and not the others.. pls sample html below.. help is much appreciated.. Thanks
<div class="parent" >
<div id="child1"> text </div>
<div id="child2" style="display:none"> text </div>
</div>
<div class="parent" style="display:none" >
<div id="child1"> text </div>
<div id="child2" style="display:none"> text </div>
</div>
<div class="parent" style="display:none" >
<div id="child1"> text </div>
<div id="child2" style="display:none"> text </div>
</div>
scripts to move through parent :
$(function () {
$(".parent:first").fadeIn(); // show first step
$("#next-step").val('Continue');
$("#back-step").hide().click(function () {
var $step = $(".parent:visible");
if ($step.prev().hasClass("parent")) { // is there any previous step?
$step.hide().prev().fadeIn(); // show it and hide current step
}
});
$("#next-step").click(function () {
var $step = $(".parent:visible");
if ($step.next().hasClass("parent")) {
$step.hide().next().fadeIn();
$("#back-step").show(); // recall to show backStep button
}
else { // this is last step, submit form
//$("#next-step").hide();
$("form").submit();
}
});
});
script for button to toggle children for each current visible parent div
$('.txtFlip').on('click', function(event) {
$('.parent:visible > #child1').slideToggle();
$('.parent:visible > #child2').slideToggle();
});
My problem now is the script to toggle child1 and child2 for each current visible parent. It only works for the first parent but not the rest. Help plz...
Thanks......

You can use jQuery's :visible selector to pick which element is currently visible and toggle based on that.
bindLoopThrough = function($button, initial_selector){
// Define a function that will apply for both sets of buttons,
// because they have similar functionality
$button.on("click", function(){
var $current = $(initial_selector),
$next = $current.next();
if($next.length===0){
$next = $current.siblings().eq(0); // Reached end, get first.
}
$current.hide();
$next.show();
});
}
bindLoopThrough($("#button1"), ".parent:visible");
bindLoopThrough($("#button2"), ".parent:visible .child:visible");