This is pretty basic, still doesn't work... I'm trying to change the class of my button, which has the id "nav_list". I wrote the script:
var specialSection = document.getElementById("nav_list");
specialSection.onclick = function() {
alert("what");
$('#nav_list').toggleClass('active');
};
I get the "what" alert, but the class isn't toggled. What am I missing? Thanks in advance!
toggleClass is a jQuery method, for use it you must include jQuery in your page.
Like:
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
At the moment if you check the console you must see an error like (demo: http://jsfiddle.net/IrvinDominin/GyaBY/):
ReferenceError: Can't find variable: $
Avoid mixing jQuery and javascript event binding so your code will look like:
$('#nav_list').click(function() {
alert("what");
$(this).toggleClass('active');
});
Demo: http://jsfiddle.net/IrvinDominin/GyaBY/2/
Related
I hope you have well with nice pleasure.
I am trying to remove Script tag by ID. For this purpose, I am apply code
var elem = document.getElementById("sns_scripts");
elem.remove();
But, this is give me error on my console windows is :
Uncaught TypeError: Cannot read property 'remove' of null
I am trying another method is :
$("#sns_scripts").remove();
It is also not working. See Picture
Picture is mention , sns_scripts script still avaialbe, and above this script my custom code, but it is not working.
Please help me, I am really want to remove sns_scripts script from my webpage.
Wrap your code within DOMContentLoaded event:
document.addEventListener('DOMContentLoaded', function(){
var elem = document.getElementById("sns_scripts");
elem.remove();
});
Because you are trying to get an element at that point where is wasn't available in the DOM. So, it was null.
do not use elem.remove(), but use
$(elem).remove();
NOTE: Re-order following lines in your code. Because you are running remove() function before writing script with id(sns_script):
<script type="text/javascript" id="sns_scripts">var video=document.getElementById('bgvid');</script>
<script>
$('#sns_scripts').remove();
</script>
In my erb file, I have a script like this:
function checkJquery() {
if(window.jQuery) {
jQuery(document).ready(function() {
alert('onready');
$('div#habla_topbar_div').click(function() {
alert('onclick');
});
});
}
else {
window.setTimeout(checkJquery, 1000);
}
}
I get the 'onready' alert, but the 'onclick' alert does not work. Any idea what I might doing wrong?
Edit:
The div is part of the Olark chat integration and the erb file has nothing except the configuration for that and the above script.
The div 'habla_topbar_div' is defined.
Image:
Several Rails-specific issues here
--
Delegation
Because most Rails applications use Turbolinks or similar, you have to delegate your Javascript (typically) from the document object:
#app/assets/javascripts/application.js
$(document).on("click", "#habla_topbar_div", function() {
alert('onclick');
});
If you use this without embedding with other JS functions, it should work, considering you have a div with id=habla_topbar_div.
--
Turbolinks Events
Secondly, you want to ensure you replace the standard $(document).ready function with one of the Turbolinks event hooks. You'll want to do the following:
#app/assets/javascripts/application.js
var your_function = function(){
...
}
$(document).on("page:load ready", your_function);
Your code looks good, maybe you don't have a div with id="habla_topbar_div".
Check this Fiddle to find out where did you wrong.
Update:
If you already have a div with id="habla_topbar_div" maybe the Id's value has been changed by some code or application before rendering or on runtime.
Try to add an unique class name to "habla_topbar_div" div like this:
<div id="habla_topbar_div" class="habla_topbar_div_unique habla_topbar_div_normal ...">
and use this:
$('.habla_topbar_div_unique').click
instead of this:
$('div#habla_topbar_div').click
Check Fiddle Demo
I have the following html code:
<a class="tabTitle" id="title_boxtab_default" tab-type="default" href="#tabs-3">Sample</a>
In jQuery I'm trying to get the value of the href attribute with:
$('.tabTitle').last().attr('href');
But it keeps telling me it's undefined?
I should mention that the number of links with class"tabTitle" increases. That's why I use .last()
Works just fine for me in JSFiddle. I changed it to this, and it returned #tabs-3:
alert($('.tabTitle').last().attr('href'));
My guess is that it's not running from a ready handler like this:
$(function() {
var x = $('.tabTitle').last().attr('href');
});
It should work. Make sure you are running the script when the element is present in the DOM, f.ex using .ready():
$(function() {
alert( $('.tabTitle').last().attr('href') );
});
DEMO: http://jsbin.com/IyeSacU/1/edit
Try DOM Ready
$(document).ready(function(){
$('.tabTitle').last().attr('href');
});
Fiddle
Not sure I titled this well.. show's that I'm in unfamiliar territory. How can I run a JavaScript function based off of the element called in a jQuery function?
Theory:
<script type="text/javascript">
$.fillit('video');
</script>
(run fillit on video tag present in page.. interchangable with other elements)
$.fillit = function(){
this is where it says "run on the tag defined in the jQuery function"
}):
$.fn.extend({
fillit : function(){...}
});
then...
$('.video').fillit();
Edit (after comments)
To fill a dom element with other elements/html:
var img = document.createElement('img');
img.setAttribute('src', 'somesrc.jpg');
$('.video').append(img);
or
$('.video').html('<img src="somesrc.jpg"/>');
You can do it the way you described like so
<script type="text/javascript" language="javascript">
$.fillit = function(content)
{
$("result").html(content);
}
//call function
$.fillit("HELLO WORLD");
</script>
or as Alexander just posted if you want to do it on the selected element.
I don't think adding functions directly to jquery with $.func = is a good idea though. If jQuery ever adds a fillit method your method will conflict with theirs.
technopeasant, it sounds like you are using a jquery plugin (in your example, a plugin called 'fillit') and it is asking you to run the plugin on a tag or series of tags. Sorry if I misunderstood your question.
If that is the case, all you need to do is one of two things. If you are trying to run it on a very specific element in the HTML page (one with an id like <div id="myvideo"></div>) then all you need to do is run:
$('#myvideo').fillit();
//Notice the '#' symbol, that looks up the element with an id of 'myvideo'
If you want to run the plugin on a series of elements (like all <p> tags in the entire document, you'd run something like:
$('p').fillit()
//notice no '#', it's just looking up all <p> tags regardless of ID.
Take a look at the jQuery documentation regarding selectors to get a more concrete idea of how these selectors work:
http://docs.jquery.com/How_jQuery_Works
Someone answered with a link to this: http://docs.jquery.com/Plugins/Authoring
exactly what I was looking for. claim your kudos!
(function( $ ){
$.fn.fillit = function() {
this.fadeIn('normal', function(){
var container = $("<div />").attr("id", "filled")
.appendTo(container);
});
};
})( jQuery );
So I am working with some jquery code to do a simple hide of a p and a show of a p. I am simple adding a class called showp and showing it while making sure the others are not shown by hiding them first. But I keep getting an error missing : after property ID. Any help would be greatly appreciated.
$(document).ready({
$("#phone").click(function(){
$(".hide2").addClass(".hide2").hide("slow");
$(".hide3").addClass(".hide3").hide("slow");
$(".hide1").addClass("showp").show("slow");
});
});
Change this:
$(document).ready({
To this
$(document).ready(function(){
Try this:
$(document).ready(function() {
$("#phone").click(function() {
$(".hide2, .hide3").hide();
$(".hide1").show();
});
});
Your document ready is invalid.
$(document).ready(function() {
// stuff here.
});
Or better yet, a shorthand:
$(function() {
// stuff here.
});