I have 3 div which are:
<div class="widgetbox" id="divone">Content 1</div>
<div class="widgetbox" id="divtwo">Content 2</div>
<div class="widgetbox" id="divthree">Content 3</div>
I need to hide two of these div so that I can make a condition to decide which to appear and which to hide later on. I tried to hide it like below, but it doesn't work. I think I'm using mvc 4. sorry for bad english.
<script type='text/javascript'>
$("#divtwo").hide();
$("#divthree").hide();
</script>
Here you get two answers:
1)
<script type='text/javascript'>
$(document).ready(function(){
$("#divtwo").hide();
$("#divthree").hide();
});
</script>
2) try this one. No need any references.
<script type='text/javascript'>
window.onload=function(){
document.getElementById("divtwo").style.display='none';
document.getElementById("divthree").style.display='none';
}
</script>
First you need to add jQuery reference. Here you is way to get latest jQuery in your project
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
then your code will work for .hide()
<script type='text/javascript'>
$("#divtwo").hide();
$("#divthree").hide();
</script>
Related
Okay... obviously this is because I am so new. I don't understand why this does not work. I thought this is because the argument its not inside a function but I don't really know.
<head>
<title>Documento sin tÃtulo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
$(function(){
$("p").hide();
});
</script>
</head>
<body>
<p>hi</p>
</body>
It should look like this:
<script src="jquery.js"></script>
<script>
$(function() {
$('p').hide();
});
</script>
First you must load the external Javascript file (like jquery.js) in its own script tags. Then you include your Javascript (or jQuery for this case) in its own script tags.
Your code works!
However, you need to load the JS file first. The function to hide the p should be in its own <script> tag (different one from loading the script)
$(function() {
$("p").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<p>hi</p>
<div>world!</div>
Since I started using a html-templatefile for my navbar elements I haven't got one of my scripts to execute(I can execute it via the console). I have experimented with on-load-functions but even that didn't seem to work. My problem is that I understand to little of the execution order and if I'm somehow blocking my script. I don't get any error messages either and when the html-template isn't used (ie - the navbar structure is included with everything else in the same html-file) the page loads as it should. So something there is messing it up. And I can call it from the console as well.
(I have tried a variety of ways but nothing have really worked, other than including the template in the document and that I would like to avoid. This setup is one of many). I hope someone can see the errors I do on the spot. I have cut out som css aswell, for readability.
Edit: Threw js out the window, since ASP was found available. Solved it in about half an hour using asp.
Just place your DOM elements inside body tag. Always render script at the end of the body, and append async javascript files at document ready (or at least this is my view of things).
<html>
<head>
<link href="Bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body id="bodyCanvas">
<div class="masthead">
<div class="container">
</div>
</div>
<div class="container Override" id ="pageContainerId" >
</div>
<script>
<script src="http://code.jquery.com/jquery.js"></script> // create a local copy of jquery and other async javascript files you can load at $(document).ready(function(){ //here append async scripts like google maps });
<script type="text/javascript" src="d3.min.js"></script>
<script src="Bootstrap/js/bootstrap.min.js"></script>
<script type='text/javascript'>
$(function(){
$("#pageContainerId").load("navbarTemplate.html");
});
</script>
Here goes code....
</script>
</body>
</html>
The code you are trying to reference in the $("#pageContainerId").load("navbarTemplate.html"); is outside the body tag and most browsers will cut this out.
Try the following:
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript" src="d3.min.js"></script>
<script src="Bootstrap/js/bootstrap.min.js"></script>
<script type='text/javascript'>
$(function(){
$("#pageContainerId").load("navbarTemplate.html");
});
</script>
</head>
<body id="bodyCanvas">
<div class="masthead">
<div class="container">
</div>
</div>
<div class="container Override" id ="pageContainerId" >
</div>
<script>
Here goes code....
</script>
</body>
</html>
Also as the script is at the top the DOM may not be loaded at the time try the following:
$(document).ready(function(){
$("#pageContainerId").load("navbarTemplate.html");
});
DOM ELEMENT SHOULD INSIDE BODY TAG
<body id="bodyCanvas">
<div class="masthead">
<div class="container">
</div>
</div>
<div class="container Override" id ="pageContainerId" >
</div>
</body>
Ok, I couldn't get it to work the way I wanted but it turned out we had asp enabled on our server so when I switched to that I got it to work beautiful in about half an hour.
And it's a better way I suspect, in terms of best practice.
Thanks for the responses.
Hi is there any possibility to load this page to div?
connectis.pl/connectis.pl/index.php
I tryied this way but seems to not load the data.
<div id="siteloader"></div>
$("#siteloader").html('<object data="ger-pol.home.pl/connectis.pl/index.php" />');
http://jsfiddle.net/SsJsL/
With jquery you can do it like this...
$("#siteloader").load("http://ger-pol.home.pl/connectis.pl/index.php");
Edit: Make sure your jquery functions are wrapped in the document ready wrapper...
<script type="text/javascript">
$(document).ready(function(){
$("#siteloader").load("http://ger-pol.home.pl/connectis.pl/index.php");
});
</script>
Or the shorthand...
<script type="text/javascript">
$(function() {
$("#siteloader").load("http://ger-pol.home.pl/connectis.pl/index.php");
});
</script>
I tried your fiddle and it works just fine..
Might be that you forgot the script tag?
<script>
$("#siteloader").html('<object data="http://ger-pol.home.pl/connectis.pl/index.php"/>');
</script>
Here's JSFIDDLE
For example I have the following HTML named index.html:
<html>
<head>
<style>
#content { float:left; }
#sub { float:right; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="action.js"></script>
</head>
<body>
<h2>Test de</h2>
<div id="content">
Content
<button class="loadSub">Load</button>
</div>
<div id="sub">
Sub content
</div>
</body>
</html>
And a simple JS file named action.js:
$(document).ready(function(){
$('button.loadSub').click(function(){
$('#sub').load('test.html');
});
$('button.hide').click(function(){
$('#sub').fadeOut('slow');
});
});
As you can see, when I click the button .loadSub the div #sub will be loaded with the new content from test.html:
<h2>This is the sub content</h2>
<button class="hide">Hide</button>
I got two problems here:
Firstly, the .loadSub button did successfully load the the div of id subcontent, but the .hide button did not work.
Secondly, after I had tried inserting
script type="text/javascript" src="action.js"
inside test.html, the hide button worked and faded out its content. But then in turn, I found out that the button loadSub no longer functioned. I couldn't load the subcontent again.
Is there any other way around to just once declare source of js file and make my button.loadSub work whenever I click it? Could anybody please explain the problem and give me a hint to fix it.
You're loading dynamic HTML into your page. This means that at the time you called $('button.hide').click(), the button.hide element did not exist in your page yet, so the click handler could not be attached.
You might want to try doing a delegate attachment instead.
$('#sub').on('click', 'button.hide', function () {
$('#sub').fadeOut('slow');
});
On the first page, put this. You can insert my JQQuery code into your action.js file. On the second page, the one you are loading into your div, put the second Jquery code I added.
On First page:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<style>
#content{float:left;}
#sub{float:right;}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(function(){
$('.loadSub').click(function(){
$('#sub').show();
$('#sub').load('test.html');
});
});
});
</script>
</head>
<body>
<h2>Test de</h2>
<div id="content">
Content
<button class="loadSub">Load</button>
</div>
<div id="sub">Sub content</div>
</body>
</html>
On the second page (the page that's loaded into the div, add this:
<script type="text/javascript">
$(document).ready(function(){
$(function(){
$('.hide').unbind("click").click(function(){
$('#sub').fadeOut('slow');
});
});
});
</script>
<h2>This is the sub content</h2>
<button class="hide">Hide</button>
The hide button isn't on the page when you try to bind the event so it is never registered.
Change it to use on like this (assuming version 1.7+)
$(document).on('click', 'button.hide', function(){
$('#sub').fadeOut('slow');
});
or delegate if an older version:
$(document).delegate('button.hide', 'click', function(){
$('#sub').fadeOut('slow');
});
This attaches the event handler at the document level so will work for any new content added to the page.
I'm playing around with Twitter Bootstrap's Tooltips, but am having problems since they moved away from Twipsy. The correect JavaScript is included in the page.
Let's say I have the following:
<p>hover on me</p>
What is the exact JavaScript I need to use to make the tooltip appear?
Thanks in advance!
Vanessa
You need to explicitly run .tooltip() for all elements that have to have tooltip. For example, this will work:
<span rel="tooltip" title="tooltip text">some text</span>
...
<script src="/js/jquery.js"></script>
<script src="/js/bootstrap.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("[rel=tooltip]").tooltip();
});
</script>
For your example it will just be:
$('a').tooltip();
but according to the documentation, you should use the title attribute, not data-original-title. That attribute is added by Bootstrap's tooltip code. Also there is no need for rel="tooltip".
Your code should be:
HTML:
hover on me
JS:
$("a").tooltip(); // this will trigger a tooltip on all <a> elements
In Bootstrap, We need to manually initialize Tooltips
its mentioned in their Documentation also.
<script type="text/javascript">
$(function () {
$("[data-toggle='tooltip']").tooltip();
});</script>
you need exactly to
<script src="bootstrap-tooltip.js "></script>
<script>
$(function (){
$('a').tooltip();
});