Develop Reference

Drag a div from a static handle

I want to make a div draggable with Javascript/JQuery. However, for reasons that I don't think are worthed explaining, I want in draggable from another div.
It happens that this other div (the handle), must not move, as is has the size of the screen and the objective is for it to alays stay covering the whole page.
I can't seem to find an situation like this, which is strange... Is this such a stupid question?
Anyway, can someone tell me how to do this? Thanks for the help in advance.

Have you tried applying the stoppropogation function to the drag event handler of the parent div?

I gonna put an example here , if you want more explanation, comment please.
HTML CODE:
<div style="width:1024px: height:768px" id="content"> <!-- this css is only an example -->
<div class="child" style="width:100px;height:100px;border: 1px solid black"></div>
</div
JS CODE:
$(document).ready(function(){
$(".child").draggable();
});
note: Use jquery.js and jqueryUI.js

div jspVerticalBar missing inside the jspContainer

In my current web project Im trying to change the scrollbar with a lib called jScrollPane.
The script applies and generates the jspContainer, but the div jspVerticalBar ist missing. First I thought the script got problems when its loaded in with .load. But I placed the script tag in the view.html that is getting loaded in.
Another problem is when I go to another view and return to the front page, the script generates a wrong width of the container. Is is so small that the content of the container gets invisible by the overflow:hidden.
Does anyone got an idea why this happens? Did I do something wrong? Can you please help me out with this?
Here are all informations you may need:
#import url("sbar.css"); /*in main.css*/
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/vendor/mwheel.js"></script>
<script src="js/vendor/jscrollpane.js"></script>
<script src="js/main.js"></script>
<script>
$(document).ready(function() {
$(".scroll-pane").jScrollPane(); // in startseite.html
});
</script>
The live example: Link

I know I am too late to reply, but just thought that other people like me, who came here just to find the answer to the question, might get some help
Checkpoints:
the container must have a fixed width (or at least a maximum width)
the container must have a fixed height (in pixel, e.g., 200px, 250px)
the container must have overflow:auto; (or at least overflow-x:hidden;overflow-y:auto;)
a regular scrollbar must appear without applying jScrollPane
Important
In case you still cannot fix the issue, then here is one additional checkpoint:
? Are you adding contents dynamically to your container on which jScrollPane is applied?
If the answer to above question is yes, then please consider the reinitialise() api of jScrollPane and use it after dynamically adding the content.
The above mentioned api is very useful for a SPA
For more information and example, please visit:
http://jscrollpane.kelvinluck.com/dynamic_content.html

JavaScript background images

Guessing this will be a real easy fix for someone with the know-how. I am still learning JavaScript and I'm always trying to learn more.
I currently have the following code:
<script type="text/javascript">
$(window).load(function() {
$("#background").fullBg();
});
</script>
This works fine. at the moment #background is:
<img src="images/background.jpg" alt="" id="background" />
However I want to be able to put the background in as a div background and not just an image.
How do I change the script above so that the function applies to the background-image of a div which will be set in CSS instead of pointing to the img tag as it currently does?
I have tried to search the internet for a solution; however I am not good enough at JS yet to word my search correctly to find what I am looking for.
Thanks in advance and sorry if my description is poor.

If I understood correctly, you're trying to assign a css property to the DIV.
Then you should use .css('propertyName', 'value').
You can find the documentation at jQuery .css()

.css() is what you're looking for (this example uses jQuery)
<script type="text/javascript">
$(window).load(function() {
$("#background").css({
"background-image" : "url(images/background.jpg);",
});
});
</script>

The plugin you are using (fullBg) was designed to work with img elements, not background images. Why do you even need a div? If you style the img with CSS as the plugin docs suggests, the outcome will be the same.

Twitter Bootstrap scrollspy always selecting last element

I have an issue with scrollspy, recreated in this fiddle:
http://jsfiddle.net/jNXvG/3/
As seen in the demo, the ScrollSpy plugin always keeps the last menu item selected no matter the scrolling position. I've read other questions and answers and tried different combinations of offset, etc., but none of them have helped. I can't figure out what's wrong.
I don't want to edit my template to include ugly html 'data' tags, so I am calling scrollspy() via JavaScript to activate the plugin.
The next step would be to remove the fixed content height and use 'affix' on the sidebar.

I had the exact same problem and for me, adding height: 100% to the body element was the fix.
(stricly nothing else seemed to make it work)

You need to attach the ScrollSpy to the element that is going to trigger scroll events, rather than the menu that is going to reflect the scroll position:
$('#content').scrollspy();​
JSFiddle

FYI: To get my desired effect (same one as on the Twitter Bootstrap docs page) I needed to set 'body' as my target element...I could not get scrollspy'ing to work by using the immediate parent of the elements I wanted to spy as the target.
(It just auto-selected the my last element always)

In my case, Firefox was always selecting the last element and it was NOT the
height:100%;
on the body that was causing the problem (as I didn't have anything like that).
It was a
position:absolute;
on a container div.
Hope it helps someone out there...

I fixed it using body height 100% but it didnt work on Firefox. After wasting so much time found the answer on github page. Applying height 100% to HTML tag fixes the issue both for Chrome and Firefox.
https://github.com/twbs/bootstrap/issues/5007

When calling the scrollspy method you typically specify the body tag and the nav element.
<script>
$(function() {
$('body').scrollspy({ target: '#faq_sidebar' });
});
</script>
The JavaScript above is equivalent to:
<body data-spy="scroll" data-target="#faq_sidebar">
The only situation where you do not specify the body tag is if you want to track an element with a nested scrollbar like in the JSFiddle above.

If anyone else's issue wasn't solved by the suggestions above try adding <!DOCTYPE html> to the first line of your page. This was a simple step which solved the problem for me.

I had this same problem; removing the height: 100% from the <body> element fixed this for me.

I had a similar issue where scroll spy would not work on anything but a body tag so I actually went into the bootstrap js found the Scroll spy (SCROLLSPY CLASS DEFINITION) section and changed this line:
, $element = $(element).is('body') ? $(window) : $(element)
to this:
, $element = $(element).is('body') ? $(window) : $(window) //$(element)
(note that the element after the // is a comment so I don't forget I changed it)
And that fixed it for me.

ScrollSpy is pretty unforgiving and the documentation is sparse to say the least...there are different and conflicting fixes for this based on your implementation...
Nested content was my problem. This fixed it for me:
(1) make sure all hrefs in your nav match a corresponding ID in your spied upon target container.
(2) If the items in your spied upon content container are nested then it won't work...
This:
<ul class="nav" id="sidebar">
<li>
<a href="#navItem1" />
</li>
<li>
<a href="#navItem2" />
</li>
</ul>
<div id="spiedContent"> <!-- nested content -->
<div id="navItem1">
<div id="navItem2"></div>
</div>
</div>
To This:
<ul class="nav" id="sidebar">
<li>
<a href="#navItem1" />
</li>
<li>
<a href="#navItem2" />
</li>
</ul>
<div id="spiedContent"> <!-- flat content -->
<div id="navItem1"></div>
<div id="navItem2"></div>
</div>
All good!
My guess if you looked at the scrollspy code its not looking past the first child of the spied container for the ids.

Make sure you're not mixing implementations. You don't need $('#content).scrollspy() if you have data-spy="scroll" data-target=".bs-docs-sidebar" on your body tag.

I think that this might be a bug in ScrollSpy.
I also had the same problem and when I stepped through the code I could see that the offset for all the targets were the same (-95px). I checked where these were being set and it was using the position() function. This returns the position of the element relative to the offset of the parent.
I changed this to use the offset() function instead. This function returns the position of the element relative to the offset of the page. Once I did this then it worked perfectly. Not sure why this isn't the default behaviour.
The reason that the position() function wasn't working in my case was because I had to have an empty div which was actually absolutely positioned 95px above the top of its container. I needed this as my target so that the headings weren't hidden behind my header that was fixed to the top of the page.

When I was trying to figure out this issue, I used some of what Mehdi Benadda said and added position: relative; to the body. I added this to the stylesheet:
body {
position: relative;
height: 100%;
}
Hopefully this helps someone in the future.

You don't have to call method scrollspy().
Also you don't need set height: 100% anywhere.
All you need is:
position: relative; for body
add data-bs-spy="scroll" to your content or body
add data-bs-target with navbar id
https://i.imgur.com/M5jib0t.png
It helps me.

It seems that scroll spy work only when used container has a scrollbar (Tested with bootstrap 5).
You can put data-bs-spy="scroll" and data-bs-target="#target-nav" attributes in the nearest parent having a scrollbar.

In my case, i had added the scrollspy component of bootstrap version 5.2.3 but my bootstrap js cdn was 5.0. After i added the 5.2.3 js cdn, it worked!
You may also add the downladed bootstrap js files as well.
And make sure to add the bootstrap css cdn too!

slide effect with jquery

I'd like to create a slide effect using jQuery. I have several div's:
<div id='div_1'>content currently displayed</div>
<div id='div_2' style="display:none">content to be loaded</div>
<div id='div_3' style="display:none">content to be loaded</div>
The idea is that div_2 appears while sliding and "pushing" div_1 out of sight, a little like scrolling a window (horizontal or vertical). I think I can't use actual scrolling because the divs' content is loading via ajax, so I can't position it precisely before it's loaded.
Any idea?
TIA
greg

You mean like this:
$('#div_2').slideDown('slow', function(){
$('#div_1').slideUp('slow');
});
See the working demo here.

Greg, it sounds like you are looking for something like I have done here:
http://jsfiddle.net/2E5Qv/
If so, what you want to do is to contain all of those <div>s inside a parent, and then when you want to slide them, animate the top of each div up the correct number of pixels. The solution I provided above has each <div> more or less set to a fixed height of 20px (via line-height).
The parent <div> acts as a sort of window to show only the current content.

I took what Sarfraz provided and modified it slightly based on what I think you were looking for. For the sake of the demo, I also made it fire on the click event. You can find the working example here: http://jsbin.com/emowu3/3
$('#div_1').click(function(){
$('#div_1').slideUp('slow');
$('#div_2').slideDown('slow');
});
$('#div_2').click(function(){
$('#div_2').slideUp('slow');
$('#div_3').slideDown('slow');
});
$('#div_3').click(function(){
$('#div_3').slideUp('slow');
$('#div_1').slideDown('slow');
});