I have many lines on my page generated from database with PHP. Each line is in DIV. I'd like to "select" a line by clicking on it. "Select" means change css for it. What is the easiest way to do it?
smarter way is to use js frameworks, like jQuery:
<div id="alldivs">
<div>...</div>
<div>...</div>
<div>...</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<!-- you don't need to download anything, just add this line ;-) -->
<script>
$(function(){
$("#alldivs div").click(function(){
$("#alldivs div").removeClass('clickedCss');
$(this).addClass('clickedCss');
});
});
</script>
You could do just a onclick event and change the css class;
<div class="yourCss" onclick="this.className='clickedCss';">content</div>
Related
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>
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.
I want to create an external js-file, in which I can configure the copy of several elements in my html file. I'm using document.getElementById("id").innerHTML = "what ever"; to "inject" or "add" my copy to html elements that have a certain id.
This works out fine, however when I have more than one element with the same id in my html file, the html from my js-file is only added to the first element but the html from my js-file should be added to all elements with the same id
That's my html construct:
<html>
<head>
<script src="copy.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div>
<strong id="back-button"></strong>
</div>
....
<div>
<strong id="back-button"></strong>
</div>
</body>
</html>
And that's my JS file:
$(function() {
$(document).ready(function addcopy() {
/* global */
document.getElementById("back-button").innerHTML = "go back";
});
});
Any help or tip is much appreciated.
Thanks!
You could use class, because ids can be used only once.
<html>
<head>
<script src="copy.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="back-button">
</div>
....
<div class="back-button">
</div>
</body>
</html>
And in javascript :
<script type="text/javascript">
$(document).ready(function addcopy() {
/* global */
$(".back-button").html("<strong>go back</strong>");
});
</script>
In js you can do it like this:
document.getElementsByClassName('message')[0].innerHTML = "Good afternoon:)!";
Then you can loop through all elements of this class.
id attribute should be unique, I know that in JQuery if you want to use multiple selector you can use class instead.
Or you can use name and the getElementsByName() function that will give you an array of elements in Javascript.
You have jQuery, why not use $('#back-button').html('go back') instead of the plain/native JS?
However, you have more than one button and IDs must be unique, so you cannot use an id for this. Use class="back-button" and the following jQuery code:
$('.back-button').html('go back');
Please use class instead of id for the HTML elements and use jquery to fill in the required text.
<div>
<strong class="back-button"></strong>
</div>
$('.back-button').text('go back'); // OR
$('.back-button').html('go back');
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();
});
The following jQuery example should put some text into the div, but it doesn't. I tried Firefox, Google Chrome and Internet Explorer.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" language="javascript"></script>
<script language="javascript">
$(window).load(function() {
$('adiv').html('<p>hello world</p>');
alert('done');
});
</script>
</head>
<body>
<div id="adiv">
</div>
</body>
</html>
Sorry, this might be stupid, but I'm stuck.
change $('adiv').html('<p>hello world</p>');to
$('#adiv').html('<p>hello world</p>');
You're not actually selecting anything in your select function
Directly after your $( opening, you need to use a CSS3 valid selector. Just a string won't select anything unless it's a HTML element (table, div, h2)
You need to preface it with a . or a # to signal either a class or ID name.
$('adiv') should be $('#adiv').
Unlike Prototype, in jQuery you specify a CSS selector, not just a string that is implicitly inferred to be an ID. I find myself forgetting this from time to time.
As e-turhan already mentioned you need # in front of adiv in your $() otherwise this is not a id selector. Also it's always better to call these .load() events inside the .ready() jQuery event whose famous shortcut is $(function() { //execute when DOM is ready }); . In your case:
$(function(){
$(window).load(
function(){
$('#adiv').html('<p>hello world</p>');
}
);
<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" language="javascript"></script> <script language="javascript"> $(window).load(function() { $('#adiv').html('<p>hello world</p>'); alert('done'); }); </script> </head> <body> <div id="adiv"> </div> </body> </html>
Paste this code instead ur query
It Will Work
Try $(document).ready(function()... instead of $(window).load(function()...