How do I change the below javascript to change my css class, rather than add/append to it?
<script type="text/javascript">
(function($){
$(document).ready(function(){
$('ul#horizontal.nav.menu').addClass('myNewClass');
});
})(jQuery);
</script>
EDIT
I am trying to change the following UL:
<ul class="nav menu" id="horizontal">
to
<ul class="myclass" id="horizontal">
I have tried the following just before my closing </body> tag and not working:
<script type="text/javascript">
(function($){
$(document).ready(function(){
// add items for bootstrap dropdown's
$("#horizontal").attr("class", "myclass");
})(jQuery);
</script>
You can try to use attr method:
$('ul#horizontal.nav.menu').attr( 'class', 'myNewClass');
Quite easy..
$("#mydiv").attr("class", "myclass");
$("#mydiv").prop("class", "myclass");
Related
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
i want to replace class me to old when user clicks on a tag, i want to do that only with .replace function. My purpose to learn how replace method work. But the function which i have made not working.
<head>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
$('a').click(function(){
$(this).attr('class').replace('me','old')
})
})
</script>
</head>
<body>
click
</body>
replace is not a jQuery function it is a function of string. You can read more about replace here. To use replace, you can read the attribute as a string, replace the contents of the string and then add the attribute back.
I don't think it is the best way to do this if you have jQuery loaded. You can use the jQuery utility designed to do these manipulations, like so:
$(this).toggleClass('me old');
This will turn on and off (toggle) both those class names. In effect it will switch from one to the other.
Docs:
http://api.jquery.com/toggleClass/
you are getting the class and it doesn't effect the class attribute, you can replace the string then set it to the element:
$('a').click(function(){
var cls = $(this).attr('class').replace('me','old')
$(this).removeClass('me').addClass(cls)
})
})
$('a').click(function(){
$(this).replaceWith('click');
});
I have created a bin with the solution on http://codebins.com/codes/home/4ldqpco
Try this instead:
<head>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
$('a').click(function(){
var theclass = $(this).attr('class');
theclass = theclass.replace('me', 'old');
$(this).attr('class', theclass);
})
})
</script>
</head>
<body>
click
</body>
That should do the trick. JSFiddle Link
I can't hide my div using some i.e. explode effect in jquery ui, It always slides down (or something like that), whatever effect I put as parameter in my code.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/1.8rc3/ui/jquery-ui.js"></script>
$(document).ready(function(){
$('.rozwin').click(function(){
$('#main').hide('explode');
$('#main').show('explode');
});
<a href="" class="rozwin>hide and show</a>
<div id='main'>...</div>
There's quite a bit wrong with this code.
This script src is missing the http:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/1.8rc3/ui/jquery-ui.js"></script>
You do not start your javascript with a <script type="text/javascript">, so all of your jQuery is interpreted as plain text.
$(document).ready(function(){
You are not preventing the default action of the click.
$('.rozwin').click(function(){
$('#main').hide('explode');
$('#main').show('explode');
});
You do not enclose your .ready()...
Your anchor tag's class has no closing quote.
<a href="" class="rozwin>hide and show</a>
<div id='main'>...</div>
Here's the snippet with all the fixes it needs.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/1.8rc3/ui/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.rozwin').click(function(e){
e.preventDefault();
$('#main').hide('explode');
$('#main').show('explode');
});
});
</script>
hide and show
<div id='main'>...</div>
Keep in mind that your show events won't work as expected because they're triggering too quickly, since you're not using it in the callback of .hide().
http://jsfiddle.net/zq2Hz/
first line missed http:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
and missed the end of $(document).ready(function(){
$(document).ready(function(){
$('.rozwin').click(function(){
$('#main').hide('explode');
$('#main').show('explode');
});
}); //at the end
you missed closing braces and close quotes for class
$(document).ready(function(){
$('.rozwin').click(function(){
$('#main').hide('explode');
$('#main').show('explode');
});
});
hide and show
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();
});
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>