I have the below Javascript code, using jQuery:
$(document).ready(function () {
$('#answer').hide(); //hiding the element
$('#questionOne').click(function () {
$('#answer').show();
However, the element does not get hidden on load. My HTML is this:
<p id="answer">All requests of this nature are required to be submitted via our website www.mufoundation.org/charityrequests. Due to the volume of requests we receive, we require at least 6 weeks notice prior to your event. If your event does not fall within this timescale unfortunately, we will not be able to help.</p>
I cannot seem to hide the paragraph answer element. How can I do this?
If you are always going to be hiding it on load would it not be better practice to not hide it on load and rather attach a CSS class that sets it to hidden? It's extremely simple to do just change your code to do this.
Create a CSS Class called hide
.hide{
display : none;
}
Add the class below.
<p id="answer" class="hide">All requests of this nature are required to be submitted via our website www.mufoundation.org/charityrequests. Due to the volume of requests we receive, we require at least 6 weeks notice prior to your event. If your event does not fall within this timescale unfortunately, we will not be able to help.</p>
If this is literally all the jQuery you have then you have forgotten to add }); }); at the end of the script. So your code should look like this;
$(document).ready(function () {
$('#answer').hide();
$('#questionOne').click(function () {
$('#answer').show();
});
});
if that doesn't fix your problem, are you sure you're including the appropriate jQuery library?
If you posted the right code, then it's the wrong syntax.
Right code
$(document).ready(function () {
$('#answer').hide(); //hiding the element
$('#questionOne').click(function () {
$('#answer').show();
}); });<-- you forgot the clossing brackets
I hope it was that! Let me know if it works.
Create a css class to hide the stuff instead of doing it in onload:
HTML:
<p class="hide">zyz</p>
CSS:
.hide {
display: none;
}
And then, use the following to show it using jquery:
$(document).ready(function () {
$('#questionOne').click(function () {
$('#answer').show();
});
});
Related
I am not an expert in javascript or jQuery. I want to replace a text that is not in the DOM while the page loads. After clicking a button the text appears.
This is the code I am using....
$(window).load(function(){
$(document).on('change', '.shippingquote', function() {
$(this).html($(this).html().replace(/Free Shipping/g,'Free Shipping (4-8 days)'));
});
});
$(function(){ $('body').html("Free Shipping, Free shipping")});
This this block of code by replacing your complete code you mentioned at the top.
It will set the given text in complete body.
If, you wanna set the text of particular container (div, paragraphs, span etc)
then give the id in the selector.
$(function(){$('#id').html("text goes here")});
Good luck..
First of all:
The load event is deprecated in version 1.8 of jQuery.
click here
The second:
i agree with chanchal yadav about that.
You can use "$(function () {...});" to run code once the page has loaded and don't need to bind it to the load event.
The following code will replace all occurrences of Free Shipping on page load.
$(function(){
$("body").html($("body").html().replace(/Free Shipping/g,'Free Shipping (4-8 days)'));
});
MutationObservers have been brought in to do what you want to, but support from browsers is still low (ie11). I've used DOMSubtreeModified, which whilst depricated works on ie9+. I've also had to use a global variable to stop the event from being repeatedly called (would love a better suggestion for this).
var modifiedByFunction = false;
jQuery(function() {
jQuery("input").on("click", function(e) {
jQuery(".shippingquote").html("The words Free Shipping are in this");
});
jQuery(".shippingquote").on("DOMSubtreeModified", function() {
if (modifiedByFunction) {
modifiedByFunction = false;
} else {
modifiedByFunction = true;
jQuery(this).html(jQuery(this).html().replace(/Free Shipping/g, 'Free Shipping (4-8 days)'));
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" value="click me">
<div class="shippingquote"></div>
I use this fancy little jQuery toggle on my site, works great. But now I have a little larger text area I want to hide, and therefore I've included it in another php file, but when the site opens\refreshes the content is briefly shown and then hidden? Have I done something wrong or does it simply not work right with includes in it ?
Show me?
<div class="content">
<?php include 'includes/test.php'?>
</div>
<script>
jQuery(document).ready(function() {
var par = jQuery('.content');
jQuery(par).hide();
});
jQuery('#toggleMe').click(function() {
jQuery('.content').slideToggle('fast');
return false;
});
</script>
Use css to hide it
.content{
display:none;
}
Also
var par = jQuery('.content');
is a jQuery object so don't need to wrap it again as
jQuery(par).hide();
Just use par.hide(); but in this case, when you will use css to hide the element, then you don't need this anymore.
That will happen. The document briefly shows all the HTML before executing the code in your ready handler. (It has nothing to do with the PHP include.) If you want an element hidden when the page loads, hide it using CSS.
#myElement {
display: none;
}
The toggle should still work correctly.
You just need to don't use jquery document ready function. just use style attribute.
Show me?
<div class="content" style="display:none">
<?php include 'includes/test.php'?>
</div>
<script>
jQuery(document).ready(function() {
jQuery('#toggleMe').click(function() {
jQuery('.content').slideToggle('fast');
return false;
});
</script>
If this information is sensitive/not supposed to be seen without access granted, hiding it with CSS will not fix your problem. If it's not, you can ignore all of this and just use CSS with a display: none property.
If the information IS supposed to be hidden:
You need to only load the file itself on-demand. You would request the data with AJAX, do a $('.content').html() or .append() and send the result back directly from the server to the browser using something like JSON.
You are using the "ready" function that meant it will hide the element when the document is ready (fully loaded).
You can hide it using css:
.contnet { display: none; }
how you render you site server side does not affect how the site is loaded on the browser, what affects it is how the specific browser chooses to load your javascript and html, what i would recommend is set the element to hidden with css, since that is applied before anything else. And keep you code as is, since the toggle will work anyways
You can also clean up the code a little bit.
<script>
$(document).ready(function(){
$('.content').hide();
$('#toggleMe').click(function(){
$('.content').slideToggle('fast');
});
});
</script>
I have been asked to put in place disabling of the right clicks on a website, I've informed them there is so many ways that people can still download the images via Google Images, Cache, Firebug etc etc, but none the less my arguments have gone ignored and they insist this must be done.
Any, I've put in the footer some code that disables right clicking on all elements using <IMG src=""> this fails to work on NivoSlider, I did change the script to use window load on disabling the right click which works but after slide1 it stops working and I assume this is something to do with changes to the DOM.
JavaScript is by far my weakest point and I'm hoping that someone without to much trouble can either give me a full working solution or something to go on. Thanks in Advance.
They are using NivoSlider with the following trigger:
<script type="text/javascript">
(function($) {
$(window).load(function() {
$('#slider').nivoSlider();
});
})(jQuery);
</script>
And this is the code that I've placed in the footer that fails to work on slide2+
<script>
$(window).load(function() {
$('img').bind('contextmenu', function(e) {
return false;
});
});
</script>
You're absolutely right with the DOM changes. You need to delegate the event to a parent element.
Try something like this:
$('#slider').delegate('img', 'contextmenu', function(e) {
return false;
});
Or this if using jQuery > 1.7:
$('#slider').on('contextmenu', 'img', function(e) {
return false;
});
You might be able to do it by preventing the default behaviour of a right click on the image.
See this answer: How to distinguish between left and right mouse click with jQuery
Let us say i have a page http://www.abc.com/xyz.html and i am going to access this page in two ways
simple as it is
I will append some stuff to the url e.g. http://www.abc.com/xyz.html?nohome by just putting the value ?nohome manually in the code.
Now i will add some javascript code something like this
$(document).ready(function () {
if (location.search=="?value=nohome") {
// wanna hide a button in this current page
}
else {
// just show the original page.
}
});
Any help will be appreciated.
As you are using jQuery to catch the DOM-ready event, I guess a jQuery solution to your problem would be fine, even though the question isn't tagged jQuery:
You can use .hide() to hide and element:
$(document).ready(function () {
if (location.search=="?value=nohome")
{
$("#idOfElementToHide").hide();
}
// Got rid of the else statement, since you didn't want to do anything on else
});
I am trying to do a slow reveal on a particular div with an id of 'contentblock' on page load. This is my first time trying to code something in jQuery and I continue to fail. The following is my latest attempt, but I'm a complete newbie to this and surprisingly google hasn't been a whole lot of help.
<script type='text/javascript'>
$(window).onload(function(){
$('#contentblock').slideDown('slow');
return false;
});
</script>
before that I also had the following instead of the window onload line above:
$(document).ready(function(){
But that didn't have any success either. Can someone help a jQuery newbie out?
First, you'll need to make sure the element is hidden (or it won't be shown, since it's already visible). You can do this in either CSS or JavaScript/jQuery:
#contentblock {
display: none;
}
Or:
$('#contentblock').hide();
If you use CSS to hide the element you need to be aware that the element will remain hidden in the event of JavaScript being disabled in the user's browser. If you use JavaScript there's the problem that the element will likely flicker as it's first shown and then hidden.
And then call:
$(window).load(function(){
$('#contentblock').slideDown('slow');
});
I've made two amendments to your jQuery, first I've changed onload to load and I've also removed the return false, since the load() method doesn't expect any value to be returned it serves no purpose herein.
For the above jQuery you can use instead:
$(document).ready(function(){
$('#contentblock').slideDown('slow');
});
$(document).ready(function(){
if($('#contentblock').is(':hidden'))
{
$('#contentblock').slideDown('slow');
}
});
if you have jquery added to your project and your div is display none ... something like this should work.