How to hide <body> without DIV? - javascript

Thanks to anyone who solves/helps solving this request. Sorry if this is an impossible/previously asked request. I searched for it, couldn't find it, so posted a question.
So, the issue is, I want to hide using JS, but, I don't wanna use DIV tags to do so.
<body>
<div id="1">Content 1</div>
<div id="2">Content 2</div>
<div id="3">Content 3</div>
</body>
I know the possibilty of grouping the DIV's into a single DIV container, but just wanted to know, if it's possible without that, i.e., hiding the whole <body></body>
Thanks again.

It is possible with javascript like this:
document.getElementsByTagName("BODY")[0].style.display = "none";
jsFiddle here: http://jsfiddle.net/aq2ab77v/1/

The JavaScript way of accomplishing this:
document.getElementsByTagName("body")[0].style.display = "none";
The jQuery way of accomplishing this:
You will want to select the body tag with jquery, and run .hide() on it.
$('body').hide();

Related

How do you display specific text onscreen using jQuery and HTML?

I'm new to Javascript. With the code below, I'm interested in displaying three values. The first problem that I've encountered is the document.write won't work. What am I typing in wrong? The other problem is that I'd like to display
the text that the first_div contains on the screen in the browser window. I believe that all of the divs in the first_div will show the text 'value.' How do I get this to display?
<html>
<head>
</head>
<body>
<div class= 'first_div'>
<p>Content</p>
<div class='comment'></div>
<div class='comment'></div>
<div id='pagination'></div>
</div>
<script type='text/javascript'>
document.write("Hello");
jQuery(function() {
$('#pagination').addClass('comment');
$('.first_div.comment').text('value');
$(document.body).append('hello');
});
</script>
</body>
</html>
Currently .first_div.comment is looking for an element with both classes. You want an element .first_div with a child element .comment. To do this, use a space to select all descendants (not just children) of what was prior to the space.
Your line of code would then look like this: $('.first_div .comment').text('value');
Learn more about CSS selectors here (this will help you for other similar problems): https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors#Information_Selectors_based_on_relationships

Radio Buttons not working when in a div

first of all i'm not sure if i'm in the right topic for this if i'm not, please tell me but anyway, i have this code
<audio id="radioplayer" src="http://habbohol.radioca.st/;" autoplay="autoplay" ></audio>
<div id="play"></div>
<div id="stop"></div>
<div id="volup"></div>
<div id="voldown"></div>
It's for my site and i'm trying to get them to work, but when its in a div the buttons never play/stop/go up/down but if it's in a image or word for example it plays just fine, the odd thing it was working earlier in a div with the exact same code but with different div codes. It would be really appreciated if you could help, I believe this is Javascript but i'm not paralytically sure tbh
I listened the music but your divs are empty if you want to see your link you need put a string into you div like: <div>Button</div>
I think you forgot to put the semicolon after what's in the onclick quotations.
Try this (assuming the functions in themselves work):
<div id="play"></div>

Questions about LocalScroll and ScrollTo (jQuery)

this problem might seem pretty trivial to some of you guys but i'm sorry i can't handle it.
Problem: I have one Div-Box called "DivBox" with the attribute overflow:hidden; and i want to display other information in it by scrolling to other divs inside of it.
Above I have links that refer to that other information.
Info
Info2
<div id="DivBox">
<div id="info1">Information</div>
<div id="info2">other Information</div>
</div>
I also included jquery, ScrollTo, LocalScroll and Easing and wrote this code:
$('#LinkToInfo').click(function(){
$('#DivBox').localScroll({
target:'#info1'
});
});
$('#LinkToInfo2').click(function(){
alert("Debugging reasons");
$('#DivBox').localScroll({
target:'#info2'
});
});
But it doesn't work. I tried debugging it but it did just not scroll. What am i doing wrong?
I hope you can help me. Thanks
Not sure if this will work, but try removing the href="#" from the <a> tags.

Clear text inside DIV

I'm using the following HTML structure:
<div id="clock">5:30 AM
<div id="day">Wednesday
</div>
<div id="date">14 December
</div>
</div>
I update the contents of these elements using Javascript. For "day" and "date" I use $("#day").text(day) and $("#date").text(date). Because "clock" is a parent element I had to use $("#clock").prepend(clock) to succesfully add the text.
The problem with the latter function, is that new text is prepended every time the clock is refreshed, i.e. it builds up a list of clock times. For the first two functions the text is just replaced, like it should. Is there a way to make this happen for the "clock" function as well?
EDIT: Sorry, should have been a bit more clear about the clock. Have edited the code, so you understand. BTW, the reason the clock is parent element is that could make the other two elements depend on the clock's position and styling.
I also created a jsFiddle: https://jsfiddle.net/daanodinot/NZtFA/
I left the list building thing (annoyingly) in!
BTW, I'm not too sure if function(); setInterval('function()', 1000) is the best way to refresh, so if you something better I'd be happy to know :)
What you need to do is change the structure of your html to this.
<div id="wrapper">
<div id="clock"></div>
<div id="day"></div>
<div id="date"></div>
</div>
Then for the javascript
$('#clock').text('12:45');
$('#day').text('Wednesday');
$('#date').text('12/14/2011');
This way you can just change/refresh the text of clock instead of prepending values to it.
Another approach, with your current html, which i do not recommend.
<div id="clock">
<div id="day">
</div>
<div id="date">
</div>
</div>
The js
$('#clock').contents().get(0).nodeValue = '12:45';
$('#day').text('Wednesday');
$('#date').text('12/14/2011');
If you have HTML
<div id="clock">
<div id="day"></div>
<div id="date"></div>
</div>
Then you don't have to modify #clock at all. By doing $("#day").text(day) and $("#date").text(date) content of those divs is changed and you don't have to touch #clock.
But in case you want to replace a content of a element then use .html(newContent). See documentation.
You should first add a new element with prepend and then replace it's content, now you just constantly keep prepending new elements instead of working on the same element again.
What do you mean by
Because "clock" is a parent element I had to use
$("#clock").prepend(clock) to succesfully add the text.
?
It seems redundant. Since $('#day') and $('#date') uniquely address your targeted elements.
My tip:
Do not use clock. $("#day").text(day) and $("#date").text(date) already update the numbers inside your #clock element.
Hy,
my consideration for your problem is, IF you choose to manipulate the Content of the #clock div you could simply do this:
var newContent="";//in here comes whatever you want to add to your clock div
$('#clock').html($('#clock').html()+newContent);
That's the way I use it most of the time but you could also do this:
var curContent=$('#clock').html();
curContent+="<>put in your code to add</>";
$('#clock').html(curContent);
This is I guess a bit slower than the first one, but it works.

jQuery: get a reference to a specific element without using id

I'm tinkering a bit with jquery to show a hidden div when a link is clicked. This should be fairly simple, but there's a flaw to it in this case. I have the following markup:
<div class="first-row">
<div class="week">
<p>Uge 2</p>
<p>(08-01-11)</p>
</div>
<div class="destination">
<p>Les Menuires</p>
<p>(Frankrig)</p>
</div>
<div class="days">4</div>
<div class="transport">Bil</div>
<div class="lift-card">3 dage</div>
<div class="accommodation">
<p><a class="show-info" href="#">Hotel Christelles (halvpension)</a></p>
<p>4-pers. værelse m. bad/toilet</p>
</div>
<div class="order">
<p>2149,-</p>
<p class="old-price">2249,-</p>
</div>
<div class="hotel-info">
<!-- The div I want to display on click -->
</div>
</div>
When I click the "show-info" link I want the "hotel-info" div to display.
My backend devs don't want me to use ids (don't ask me why..) and the above markup is used over and over again to display data. Therefore I need to be able to access the "hotel-info" div in the "first-row" div where the link is clicked.
I've tried to do something like:
$(document).ready(function() {
$('.show-info').click(function() {
var parentElement = $(this).parent().parent();
var lastElementOfParent = parentElement.find(".show-hotel");
lastElementOfParent.show();
});
});
But without a result :-/ Is this possible at all?
Any help is greatly appreciated!
Thanks a lot in advance!
Try this:
$('.show-info').click(function() {
$(this).closest('.accommodation').siblings('.hotel-info').show();
});
Even better imo, as it would be independent from where the link is in a row, if every "row div" has the same class (I assume only the first one has class first-row), you can do:
$(this).closest('.row-class').find('.hotel-info').show();
Reference: .closest, .siblings
Explanation why your code does not work:
$(this).parent().parent();
gives you the div with class .accommodation and this one has no descendant with class .hotel-info.
It is not a good idea to use this kind of traversal for more than one level anyway. If the structure is changed a bit, your code will break. Always try to use methods that won't break on structure changes.
You're right in not using an ID element to find the DIV you want :)
Use closest and nextAll
Live demo here : http://jsfiddle.net/jomanlk/xTWzn/
$('.show-info').click(function(){
$(this).closest('.accommodation').nextAll('.hotel-info').toggle();
});

Categories