How do I set a height with javascript on load - javascript

How can I set height and visibility (detailsVisible) on load? Thanks in advance.
From here:
To here:

The easiest, and best way to do this is to use a library called jQuery. It allows you to write less code, and provides a lot of pre-written functionality for you.
Firstly, include jQuery in the <head> or at the bottom of your <body> of your HTML file:
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
Next, you'll want to use this JavaScript. Make sure this is below the <script> tag for jQuery, or it won't work:
$(document).ready(function()
{
$theDiv = $('#theid'); // #theid should be the `id` attribute of the div you are trying to modify
$theDiv.css({'height': '57px'}); // the height can be set to whatever you want
$theDiv.attr('detailsVisible', true);
});
You can also run that particular code which is inside $(document).ready(); whenever you want, such as when you click on a button etc. This particular code above simply runs as soon as the page is ready.

Related

interchange html content using javascript

Good day! Newbie here. I just want to know if it's possible to change the whole content of an html using javascript? I got some codes here. (not mine but whoever did this, thank you so much!) I don't know where to put/insert all the codes of the new layout like when you click a button then the whole content will change. Thank you very much for helping me.
<script language="Javascript">
<!--
var newContent='<html><head><script language="Javascript">function Hi()</script></head><body onload="Hi();"><p id="p">hello</p></body></html>';
function ReplaceContent(NC) {
document.write(NC);
document.close();
}
function Hi() {
ReplaceContent(newContent);
}
-->
</script>
The easiest way to do this is with jQuery.
function insertHtml()
{
var newHtml = '<div><span>Hello World</span></div>';
$('body').html(newHtml);
}
Something like that will replace the entire contents of body with newHtml. You can also do this with pure javascript using the .innerHtml property but jQuery has many advantages.
EDIT: If you want to add something to the DOM rather than replacing the entire thing, use
$('body').append(newHtml)
instead. This will add the content to the end of the body. This is very often used for things like adding rows to a table.
Yes it is possible but this code is not valid unless you remove the comment tags however don't use the document.write() after page load unless you want to overwrite everything in page including the script

Modify more than 1 css file with javascript

I'm trying to find a way for modify CSS while HTML is running, so far I find that is possible just with a little script like this next...
$("button").click(function(){
$("p").css("color","red");
});
As I can concern this is an effective way to modify the local CSS stylesheet refered to our HTML while webpage is running (i.e. pushing a div button).
What I'm trying to do is modify an specific .class from CSS stylesheet of an jQuery plugin for replacing the standard right-click context menu.
I didn't found any way in JS to call an specific stylesheet for modify any .class or #id
So my HTML had the following definitions:
<script src="jquery.contextmenu.js"></script>
<link rel="stylesheet" href="jquery.contextmenu.css">
<link rel="stylesheet" href="localstyle.css">
But when I try to update custom jQuery CSS with a script like this
$('#red').click(function(){
$('.contextMenuPlugin').css({'background-color': 'white'});
.contextMenuPlugin (native in jquery.contextmenu.css) isn't recognized, that script only work with a .class or a #id from my own stylesheet (localstyle.css).
I try things like using my local CSS embedded in HTML, and referencing jQuery CSS with an id but still nothing change. So there's the link of Github repo from jQuery plugin:
https://github.com/joewalnes/jquery-simple-context-menu
I try to make a live but JSfiddle dosn't work at all with this proyect, so if it helps or anyone want to check it, there's an pastebin of issue:
http://pastebin.com/u/27GRiS (4 files)
I hope someone help me clarify this, thanks in advance,
Federico.
The problem is that you think that
$('.contextMenuPlugin').css({'background-color': 'white'});
creates a stylesheet with
.contextMenuPlugin { background-color: white }
But it's not like this.
$('.contextMenuPlugin') gets all elements with class contextMenuPlugin in the moment you use it, and then, .css({'background-color': 'white'}) modifies the inline style of each element.
That means, if you create new elements with class contextMenuPlugin after that code, they won't be affected.
Then, you can:
Make sure that your target element exists when you use the code
Create a stylesheet with the desired CSS
Some time ago, I created a function which adds desired rules to an stylesheet, and allows you to reference and change/delete them. You can see it in this answer.
You should rethink your solution. Instead, add an additional class to your stylesheet that has the CSS changes you want.
Then, on clicking the button you can call addClass to add it to the appropriate elements.
Take your <script> code out of the <head> and put it at the end of the <body>.
Also you don't need this:
$(function() { ... })
if you already have this:
$(document).ready(function() { ... })
In other words, remove line 29 and line 27 (the $(function() { and });) from this file

Javascript not making div show

I'm having trouble making a div show up using javascript.
<div class=" notification success">
x
<p>An email has been sent confirming your identity.</p></div>
<script type="text/javascript">
var notification = '.notification';
$(notification).show();
</script>
</div>
Any ideas?
Place your jquery js in a document.ready() otherwise you cant ensure that the DOM is fully loaded and ready.
Your need is just a one liner like so
$(document).ready(function()
{
$('.notification').show();
});
You need to have double or single quotes surrounding the selector if you're naming a specific element ("#id", ".class").
Best way to do this is to avoid using the variable. It's just three extra characters anyways.
Also, put your code into a $(document).ready(function(){}); function like this:
$(document).ready(funciton(){
$(".notification").show();
});
To minimize the amount of code you're putting in, you can just use this instead:
$(function(){
$(".notification").show();
});
$(function(){}); can replace $(document).ready(), as by default jQuery selects the document.

jQuery/Javascript Plugin best practice

I'm not particular familiar with using jQuery/Javascript so I don't know what the best way to do what I'm asking, it works but I don't know how efficient it is.
Basically I have a plugin called TipTip to create tooltips. It either takes the info from the "title" attribute of what you want the tip to appear over or you can use an option in the script to include HTML, like so:
<script type="text/javascript">
$(function(){
$(".someClass").tipTip({content:"<strong>What you want in the tooltip</strong>"; })
});
</script>
I want to generate a lot of different tooltips on my page but they all fit a similar style and really only need a changeable variable (they are an achievement progress bar so I only need to pass a single value for the % progress).
So is it alright to simply have a lot of script tags and duplicate the code above or can I pass a variable into it somehow and only keep the one piece of tooltip code at the top?
Or is this a question for suited to the devs of TipTip? Thanks in advance.
Assuming HTML5 is ok to use in this scenario, I'd reccommend using the html data attributes to store your element specific tooltips... and then using it to populate the tiptip plugin...
$(function(){
$('.toolTipClass').each(function() {
var element = $(this);
element.tipTip({
content: "<strong>"+element.data("toolTip")+"</strong>"
});
});
Now just add the HTML5 attribute like so
<div class="toolTipClass" data-toolTip="This is the tool Tip">Div Content</div>

Can I target an element before it's closed?

I'm wanting to add a class to the body tag without waiting for the DOM to load, but I'm wanting to know if the following approach would be valid. I'm more concerned with validity than whether the browsers support it for now.
<body>
$("body").addClass("active");
...
</body>
Thanks,
Steve
The .elementReady() plugin seems to be pretty close to what you're looking for.
It operates by using a setInterval loop, that exits as soon as document.getElementById() returns an element for a given id.
You could probably do a slight modification of that plugin (or commit an update/patch) to allow for generic selectors (at least for "tagNames") instead of just ids.
I don't believe there is any truly reliable cross-browser compatible way to address an element before it's loaded - other than this sort of setInterval hacking
Unless you are able to place your javascript command inside the target element like #JasonBunting suggests.
If the element doesn't exist in the DOM, the search will fail to find it and the action won't be applied. If you can't do it in the $(document).ready() function, you might want to try putting the code after the element being referenced. I believe this will work.
<body>
<div id='topStories'></div>
<script type='text/javascript'>
$('div#topStories').addClass('active');
</script>
</body>
If you need to add the class to the body, I would definitely use $(document).ready().
Short answer: it depends. Apparently, according to my tests, the answer seems to be yes, depending on what you want. I just tested this:
<html>
<head>
<style type="text/css">
.foobar { background-color: #CCC; }
</style>
</head>
<body>
<script type="text/javascript">
window.document.body.className = "foobar";
</script>
<div style="border: solid 1px"><br /></div>
<script type="text/javascript">
// happens before DOM is fully loaded:
alert(window.document.body.className);
</script>
<span>Appears after the alert() call.</span>
</body>
</html>
In IE 7, when the alert() takes place, the value is set correctly, but the style hasn't yet been applied (it is quickly applied as soon as the DOM is finished loading).
In Firefox, the style has been applied by the time the alert() takes place.
Anyway, hope this is helpful to you.
Basically, the answer is no. In IE6 and Firefox 2 (the browsers I have the most experience in), the element isn't in the DOM until after the close tag (or the page is done rendering, for invalid XHTML). I know that jQuery provides a convenience methods that seems to react quickly enough to avoid "flicker" in most cases. You would use it like so:
<script>
$(document).ready(function() {
$("body").addClass("active");
});
</script>
<body>
..
..
..
</body>
But that's about it for javascript.
Of course, in the example you provided, you could easily just accomplish the same effect with:
<body class="active">
</body>
That was VERY helpful.
To put a little real world to the question.
I build with the assumption that JavaScript isn't supported and then override with the JavaScript. The problem is, that when I have to wait for the DOM to load before my overrides kick in the site goes through the flicker stage as it's built. I'm hoping that if I can add a class of "active" to the body element before the rest of the site's loaded I'll be able to apply JavaScript assumed styles before the page renders.
What I don't want to do is to add this and then get a call when Firefox4 comes out that I shouldn't have done it.
If you take a look at a site I built, you'll see that it degrades gracefully, but that ficker bugs me (especially if an ad hangs the site up). I could take the other guys approach and just build it with JS assumed, but come on - that's just lazy...
Rather than adding a class to your <body> tag you might find it easier to add a class to the <html> tag by doing:
<script type="text/javascript">
document.documentElement.className = 'active';
</script>

Categories

Resources