I want to get the body element of an html using jquery and then disable the vertical scrolling?
Try this...
$('body,html').css('overflow','hidden');
the ,html allows you to also include the <html> because some browsers may use that as the base as oppose to the <body> tag so it helps treating both as if they were one.
helpful
any tag should be selected like so $('a'); or $('body');
an element can be selected by id using the prefix # so
<a id="c_1" >CLick Me</a>
$('#c_1');
or by class with the prefix .
<a class="classname">Click Me</a>
$('.classname');
for more information read http://api.jquery.com/category/selectors/
as for the scroll bars they are controlled by css, you could simply go on a css file and do the following.
body, html {overflow: hidden;}
the overflow parameter allows you to control what happens when content overflow the assigned width and hight.
http://reference.sitepoint.com/css/overflow
or the proper reference http://www.w3.org/TR/CSS2/visufx.html
sorry if this is too technical, but one day you would have to learn about these :)
You can get the body element with: $("body")
then disable the scrollbars with CSS
$("body").css("overflow", "hidden");
Since nobody mentioned this, it's pretty easy to select the body element without jQuery.
It's simply:
document.body;
And based on your question, you would disable vertical scrolling by setting overflow: hidden:
Example Here
document.body.style.overflow = 'hidden';
Related
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!
I am using Visual Studio 2010 and jQuery 1.7.
Assume that my page is completely covering the div width 100% and height 100%.
i just want to select a specific part and change the CSS of that part, for example, highlight it with a different color.
I want to highlight a specific part of the DIV using jQuery
Please help me out !!!!
Update
<html>
<head></head>
<body>
behind the whole html of the page this
div overlay's the html tag
<div Style="width:100%; height:100%; z-index:100000;">
</div>
</body>
</html>
I don't want select the text like bugmuncher.com
To perform a highlight to a certain div id or class.
$('#id').css('backgroundColor', 'yellow');
Make sure you wrap the specific code with a span tag.
Your sentence with a <span id="id">highlighted</span> part.
Maybe try the jquery hilighter plugin. Simple to use.
Core issue : http://jsfiddle.net/pipip/P46Xg/
I have a div container with a few paragraphs of text,
and inside one of these paragraphs is the following anchor <a name="stop" />
The container is set to overflow:hidden
Is it possible with javascript / JQuery to set the height of the container so that the bottom of the container stops exactly at or below the anchor?
Added Depth & Background : http://jsfiddle.net/pipip/yj9dB/
This would be used for a modified JQuery Slider. Where someone using a CMS could type [readmore] anywhere into the Content field, which would be replaced by the above anchor via PHP. This way they would be easily able to control where the Read More break appears within the container. In the associated example I am hard-coding the height to 75px, although what I want is for the height to be dependent on the location of the anchor name="stop" in the text.
Thanks. If this is an awful way to go about it, I'm all ears!
With jQuery you could do it like this:
$('#container').height( $('a[name=stop]').position()['top'] );
and CSS:
#container {
position: relative;
}
We need this because .position() gives us the position relative to an element's offset parent, and we can make #container the offset parent of the anchor tag by setting its position to relative.
JSFiddle: http://jsfiddle.net/divad12/RYPm7/1/
Also, for HTML5, you may want to consider setting an anchor tag's id attribute instead of name: HTML Anchors with 'name' or 'id'?
Still, the best way is to make the link load the full article via Ajax.
I am using javascript to display the height of my current div.
This is an example of the effected area
//css
.test
{
height:1px;
}
#test1
{
margin:1px;
}
//html
<div id="test1" class="test"></div>
//javascript
var a = document.getElementById('test1');
a.style.height //how I access the style
Firebug says that the length of style is 0 and height is empty.
How can I access the correct height?
You need to look at the computed style, not the specified style. See Quirks mode's getstyle page which answers the question
Sometimes you'll want to see what styles the default document view has. For instance, you gave a paragraph an width of 50%, but how do you see how many pixels that is in your users' browser?
and it explains how to derive and use the getstyle function, though it's easier to use a library like jquery which provides a simple css function.
Try a.offsetHeight instead of a.style.height
jsfiddle demo
div height is dependent on its children. If its empty, it'll be 0.
The code you have to get height is correct, btw.
Check out the getComputedStyle method. It should do what you are looking for. Kinda lame, really, I wish this was handled better in the DOM.
well heres my problem. Lets say i have 3 div tags, all are 100pixels wide:
<--- DIV WIDTH --->
Text in div 1
Text in div two, it overflows
Text in div three
<--- DIV WIDTH --->
Now, currently i have this css for the divs:
width:100px;
overflow:hidden;
What i want to do is if the text overflows, it scrolls like a marquee so all the text can be seen if you wait a little bit. But i only want the marquee to show if the text overflows.
How would i do this?
Thx, Tony
solving the conditional part
JS
var el = $('your element');
if (el.get(0).scrollWidth > el.width()) {
// Your marquee code here
}
$(function(){
$box = $('div.box');
$box.children().each(function(){
if ($box.width() < $(this).width()) {
$(this).wrap('<marquee>');
}
)};
});
Would work in jQuery (I haven't checked it yet. If you have any problems with it reply). Optionally, you could set a scroll attribute in css.
The conditional part can be resolved easily like rennat proposed.
Is it possible for you to use jQuery? If it is, build your html compatible with jQuery marquee plugin, and just call $(element).marquee(); for the animation. It's better than the '<marquee>' tag since it uses only divs with proper css attributes (avoiding non-standard tags use).
This wouldn't work for your problem as described (plain text in a div), but if that's just a minimal case, you can use overflow: auto, which will add a horizontal scrollbar if it overflows.
(Note also that marquee is a non-standard HTML tag.)