Here's my code:
<script type="text/javascript">
$(document).ready(function () {
$("[class^=\"hide\"]").hide();
});
</script>
<div class="hide1">Hide</div>
<div class="show1">Show</div>
<div class="hide2">Hide</div>
<div class="show2">Show</div>
<div class="hide3">Hide</div>
<div class="show3">Show</div>
<div class="hide4">Hide</div>
<div class="show4">Show</div>
But on page load, the hide divs are still visible... what am I doing wrong?
Wow... I feel so stupid. I spent so much time banging my head against a wall, and only discover the solution after I post here...
So turns out I was doing everything correctly, but the divs were in a View (I'm using MVC3) that was being loaded after $(document).ready was being called. Moving the code into the View solved the problem.
Why do you have separate classes for those? Why not have a single hide class and set those attributes above (e.g. "hide1") as ids, then your selector can simply be on that class e.g. $('div.hide')?
See http://jsfiddle.net/2GzpA/1/ for an example.
EDIT:
For your question, you comment:
#Tomgrohl well my code is actually much more complicated. I need to be able to hide and show each div individually.
Why not add a separate class to use for this case? Then your selector becomes $('div.specificCaseHideClass'). You can have as many classes as you like and this is a fine example of when to add one.
try this its simple
$("div:even").hide();
Are you sure that jquery is included? This seems to work: http://jsfiddle.net/6ycbT/
Also, check your js console to see if any errors are getting thrown that might prevent this code from executing
switch out the outer quotes by single quotes and it works:
working fiddle: http://jsfiddle.net/geertvdc/hv4Ls/
code:
$('[class^="hide"]').hide();
You can do :
$(document).ready(function () {
$("div[class*=hide]").hide();
});
Related
So I've got this little piece of HTML that I have zero access to, and I need to change the URL of where it's linking, to somewhere else.
Now I've looked around, and I've tried different approaches and non seem to work so I must be doing something wrong.
the Html code:
<div class="manageable-content" data-container="edit_register_ind_container">
<a class="entry-text-link secondary-step step-button" id="register_ind_container" href="oldurl">Register</a>
</div>
First I wanted to try something that seemed easier, which was to change the displayed text "Register" to "Start a Fundraiser"
This is what I have got for that part:
// url manipulation
$(document).ready(function(){
$("#register_ind_container").click(function(){
$("#manageable-content a").text('Start a Fundraiser');
});
$("#register_ind_container").attr("href", "http://google.ca");
});
No luck so far for any of it.
a little background information:
I am using a platform called Luminate/Blackbaud, its a CMS with a weird set up. header tags and stuff like that go in a different place than the html body and the css is somewhere else as well (but I'm just using ftp to reference it in the header).
How I'm referencing the javascript code.
<script type="text/javascript" src="../mResonsive/js/urlmanipulation.js"></script>
My css works so I'm certain this should to, but I just don't know why it isn't.
All suggestions welcome (except for asking for the html access because I have, 3 weeks ago lol)
Thank you for your time!
I saw your both code :
$("#register_ind_container").attr("href", "http://google.ca");
This line will execute on page load so href should be changed on load
$("#register_ind_container").click(function(){
But when you performing this click on Id
it wont work because at that instance this id associated with an hyperlink
so hyperlink having the default subset rules
for Overriding this you can try
$("#register_ind_container").click(function(e){
// custom handling here
e.preventDefault();
$(this).text('Start a Fundraiser');
});
But this is also not a Good Practice. Hope this helps !
$(document).ready(function(){
$("#register_ind_container").click(function(){
$(this).text('Start a Fundraiser');
$(this).attr("href", "http://google.ca");
});
});
You are changing the URL outside the click event.. Wrap it inside the click event.. Also make use of $(this)
// url manipulation
$(document).ready(function(){
$("#register_ind_container").click(function(){
$(this).text('Start a Fundraiser').attr("href", "http://google.ca");
});
});
<script>
$(document).ready(function() {
$('.notification .tools .remove').on('click', function () {
alert('hola');
$(this).parentsUntil('.notification').remove();
});
});
</script>
<div id="notification-list" class="notification-chain" style="display:none">
#foreach ($notifications as $notification)
<div class="notification" style="width:300px">
<div class="tools">
</div>
<div class="notification-messages">
<div class="message-wrapper">
<div class="heading">{{ $notification->name }}</div>
<div class="description">{{ 'User ' .$notification->points_to. ' ' .$notification->content }}</div>
<div class="date pull-left">{{ $notification->created_at }}</div>
</div>
<div class="clearfix"></div>
</div>
</div>
#endforeach
</div>
Hello readers,
Above is currently what I'm working with. It displays a drop-down to hold all notifications a user has received and I currently have an x in the top corner of each "notification" div.
However none of the above jQuery seems to be running. The alert won't display and I get nothing in the console.
Please feel free to ridicule me and tell me what stupid thing I'm doing wrong.
Many thanks.
I appreciate all the help guys.
Here are some laravel.io files with some wider context:
The full html:
http://laravel.io/bin/Nk4xP
js for the dropdown:
http://laravel.io/bin/9vn1O#
Here are some debugging tips:
Think about all the things that might be going wrong, then start ruling them out. For example:
Maybe jQuery is not loaded at all.
Maybe the selector for the event handler is incorrect and jQuery can't find an element to attach the event handler to.
Maybe the code in your $(document).ready() function is not executing, and the event handler is never set up.
Using a combination of changes to your code and the browser console, you can rule these three things out:
Is jQuery loaded? Open the console & type $ - if it says undefined, then that's your problem.
Is the selector for the element incorrect? Open the console and type $('.notification .tools .remove'). If you get an empty array, then that's your problem. As an added bonus, Chrome (and probably other browsers) will highlight the selected element if you mouse over it - this is useful in case you're selecting a different element than you expected.
Is the $(document).ready() code executing? Stick a different alert in there at the top of the function & see if it fires when you reload the page.
It's important to tackle issues like these one at a time - what happens if you change two or more things at once, and the problem goes away (or a new problem arises)? You won't know which one solved or caused the problem!
I was able to make it work in the fiddle below.
I removed the display:none (so I can see the div) and the non html characters. Try looking at the browser console (F12 in linux and windows computers) and see if there are errors. Javascript errors will prevent further code to run.
Also I put a text within the a href tag
remove
https://jsfiddle.net/m9rktusb/
As notification is a class for the div, there should be a dot in front of the class as a selector like this:
$(this).parentsUntil('.notification').remove();
Hope this works.
Luke can you please show us the final HTML?
the code is running perfectly, so the issue should be somewhere else.
https://jsfiddle.net/z7958hx7/1/
$(document).ready(function() {
$('.notification .tools .remove').on('click', function() {
alert('hola');
$(this).parentsUntil('.notification').remove();
});
});
I need help understanding what I'm doing wrong. I'm loading a page and grabbing two divs using .load works great no issues. but then I want to find one of those divs and remove the bootstrap class and possibly add another class .addClass() howeve rI can't even get the removeClass to work. Am I doing this correctly?
$(document).ready(function() {
$("#siteloader").load( "/men/Maria-Brown #qvImage, #qvContent" );
$("#qvImage").removeClass(" .col-xs-12");
});
Awww yes I figured it out. because the main.js loads the popup and has it set to hidden until the popup is triggered. the
$("#qvImage").removeClass("col-xs-12");
needed to be added to the function inside the main.js now it works great.
thanks guys
I am not a really good understanding guy in all aspects of jquery, but I think I have one suggestion that you should check:
$(document).ready(function(){
$("#siteloader").load( "/men/Maria-Brown #qvImage, #qvContent", function(){
$("#qvImage").removeClass(" .col-xs-12");
} );
});
so this means that you run the "removeClass()" function AFTER the load is done. Try it.. I think this should help.
I can't write the comments yet, so I'm writing it as an Answer...
I am adding a series of divs with dragdealerjs functionality. The problem is I need to be able to tap and hold the ".handle" div inorder to expose a slider/drawer below it. I have simplified my code down to get to the root of the problem. I am appending the ".innerGroup" div to the ".groups" div.
HTML:
<div class="groups scroll">
<div class="innerGroup">
<div id="demo-simple-slider1" class="dragdealer">
<div class="igIcon1"></div>
<div class="handle"></div>
</div>
</div>
</div>
Javascript:
This code doesn't work,
$(document).on('taphold', '.handle', function() {
alert('Tapped');
});
This code does work though,
$(document).on('click', '.handle', function() {
alert('Tapped');
});
I know there are several other similar answers to this one here but I fear that drag dealer may be complicating the issue. I also think the problem is related to adding the innerGroup after the DOM has loaded. Thanks in advance.
The error here is that drag dealer actually takes control of the taphold event. To work around you need to take a two stage check with a 750 millisecond time out (same as a standard taphold) and put the distance the slider can move as .49-.51 (or something similar ). If anyone wants the code leave a comment here and ill post what I come up with.
Happy coding
I'd like the content inside <div class="tcw-content"> to change, when another div is clicked, however I have never used Ajax (maybe it doesn't have to be done in Ajax, but I can't think of a JS/CSS way, examples appreciated :) ), would anyone have any examples for me please? For example, the user will click onto <li id="tab-tab_700964" class="grp"><a>Group A</a></li> and as soon as the hotspot is clicked, the content inside the above mentioned div will change.
How can I achieve this?
You can use jQuery, example:
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#tab-tab_700964 a').on('click', function(){
$('.tcw-content').html('hey');
});
});
</script>
<li id="tab-tab_700964" class="grp"><a>Group A</a></li>
<div class="tcw-content">
hello
</div>
Go take a look at jQuery. It makes this pretty easy. Your example would look like this:
$('.grp a').click(function(e) {
e.preventDefault();
$('.tcw-content').html('new content goes here');
});
To explain, $ is the jQuery object. When you use it as a function with a string, it finds all elements matching that selector, almost exactly the same way CSS selectors work. Then, there are a variety of functions you can call on these matched elements. In this case, we call click() and pass it a function that will be run when the link is clicked on. Inside of that function, we find the div using $('.tcw-content') and update its contents by using the html() function.
jQuery's documentation is quite good. Start playing with it, maybe using jsFiddle as a sandbox.
Maybe you are looking for a content slider.
HTML Content Slider
:: Featured Content Slider v2.5
Examples
40 examples
do it with jquery. Include the jquery library, and then add a new javascript file with a document.ready event. Inside the document ready, just add something to listen for when your div is clicked. Read here:
http://www.w3schools.com/jquery/event_click.asp
http://api.jquery.com/click/