I came up with some jquery to come from an external page and to show the hidden div (#section2) on another page. The problem is that I can't seem to get #section3 to work the same as #section2. Here's the code.
jQuery(document).ready(function() {
var hash = window.location.hash.substring(0);
jQuery(hash).css({
"display": "block"
});
if (hash != '#section2') {
jQuery('#section1').css({
"display": "block"
});
}
else {
jQuery('#section1').css({
"display": "none"
});
}
});
I tried else if
if(hash != '#section3'){
jQuery('#section1').css({"display":"block"});
}
I can only seem to get either #section2 or #section3 to appear with section1 hidden when their respective urls with the hash are entered. I can't seem to get them both of them to function correctly at the same time. Basically I need some thing that will produce
if(hash != '#section2' or '#section3'). I'm learning so any help would be much appreciated.
jQuery(document).ready(function() {
var hash = window.location.hash.substring(0);
jQuery(hash).css({
"display": "block"
});
if (hash != '#section2' && hash != '#section3') {
jQuery('#section1').css({
"display": "block"
});
}
else {
jQuery('#section1').css({
"display": "none"
});
}
});
Also, look into using the jQuery .show() and .hide() instead of those css changes (same effect, but less wordy, and it remembers the previous state).
Try;
$(document).ready(function(){
var sectionhash = window.location.hash.substring(0);
$(hash).css({"display":"block"});
if(hash != '#section2' || hash != '#section3'){
$('#section1').css({"display":"block"});
}else {
$('#section1').css({"display":"none"});
}
});
OR
$(document).ready(function(){
var sectionhash = window.location.hash.substring(0);
$(hash).css({"display":"block"});
if(hash != '#section2'){
$('#section1').css({"display":"block"});
}else if(hash != '#section3'){
$('#section1').css({"display":"block"});
}else {
$('#section1').css({"display":"none"});
}
});
(function($) {
var hash = window.location.hash;
$(hash).css('display', 'block');
$("#section1").toggle(!(hash=='#section2'||hash=='#section3'));
})(jQuery);
Related
Hello i have a problem regarding my Javascript code: i want my code to load every second but that won't work here's my Javascript:
$('#search_text').setInterval(function(){
var search = $(this).val();
if(search != '')
{
load_data(search);
}
else
{
load_data();
}
}, 100);
Does anybody know how to fix this problem?
thanks in advance.
this pointer here is not actually referring to the search-text element
You might have to try below
$('#search_text').setInterval(function(){
var search = $('#search_text').val();
if(search != '')
{
load_data(search);
}
else
{
load_data();
}
}, 1000);
Input boxes dont have setInterval method. Try the following:
setInterval(function(){
var search = $('#search_text').val();
if(search != '') {
load_data(search);
} else {
load_data();
}
}, 1000);
I have the below script
$('#copyright, #credit, #doom a').each(function () {
if ($(this).css('font-size') != '15px') {
document.location.href = "http://www.example.com";
}
});
It checks all these IDs' CSS properties for font-size 15px; if it's not 15px then the page will be redirect to example.com.
I want to know how can I add multiple css properties in that script. I want to include position:relative;height:auto;background:#000;.
It may look like this: (this is only example not the working script )
$('#copyright, #credit, #doom a').each(function () {
if
position:relative;height:auto;background:#000
{ do nothing }
else
{
document.location.href = "http://www.example.com";
}
});
Perhaps something like this:
For the sake of modularity and clarity you can separate this process into its own function:
function valid(element){
return (element.css('font-size') != '15px' &&
(element.css('position') != 'relative' &&
(element.css('height') != 'auto' &&
(element.css('background') != '#000');
}
And then use it in your code:
if (valid($(this)){
document.location.href = "http://www.example.com";
}
I'm trying to hide/show sections of a page using the following script:
$(function () {
$('.open').on('click', function () {
var contentType = $(this).attr('id');
if (contentType == "all") {
$('.content-div').show();
} else if (contentType == "train" || "manual") {
$('.content-div.' + contentType).show();
$('.content-div:visible:not(.' + contentType + ')').hide();
} else if (contentType == "close") {
$('.content-div').hide();
} else {
$('.content-div.' + contentType).toggle();
}
});
});
A jsfiddle example is here with html
The issue is with the final line in the else part - this works correctly (show/hide the relevant div(s) with the associated class) when outside the if-else statement but doesn't work in the else section - the div appears the first time a numbered button is clicked, but doesn't disappear on reclicking.
What am I doing wrong? Many thanks.
Replace:
} else if (contentType == "train" || "manual") {
with:
} else if (contentType == "train" || contentType == "manual") {
"manual" is always evaluated as true therefore this whole else-if branch is evaluated as true. See MDN for more details.
Using jQuery fade in and fade out, I want my current page to fade out when a link on the navigation bar is selected and then I want the new page to fade in. I am unable to get the anticipated effect.
Here's my code:
$(document).ready(function() {
$('body').css('display', 'none');
$('body').fadeIn(2000);
$('a').click(function() {
event.preventDefault();
newLocation = this.href;
$('body').fadeOut(2000, newpage);
});
function newpage() {
window.location = newLocation;
}
});
Give a try to will's suggestion. The best way to achieve this is to prevent a whole reload of your page. Use Ajax or .load() function ! "Description: Load data from the server and place the returned HTML into the matched element." Once the content is loaded, fade it in.
HTML
<body style="display:none;">
content
</body>
JS
function redirectPage() {
window.location = linkLocation;
}
$(document).ready(function() {
$("body").fadeIn(600);
$('a').click(function(event) {
if (this.href == "" || this.href == null) {
event.preventDefault();
return;
}
if ((this.href.indexOf("#") == -1) && (this.href.indexOf("mailto:") == -1) && (this.href.indexOf("javascript:") == -1) && (this.target != "_blank")) {
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(600, redirectPage);
}
});
});
Try this:
Let's your navigation link is:
My LINK
Then your jquery code should be:
$(document).ready(function() {
$('body').css('display', 'none');
$('body').fadeIn(2000);
$('a.switch').click(function(event) {
event.preventDefault();
newLocation = this.href;
$('body').fadeOut(2000, newpage);
});
function newpage() {
window.location = newLocation;
}
});
Don't forget to put the event as an argument to the function.
Hope it helps!
I am using this script : http://www.morethannothing.co.uk/wp-content/uploads/2010/01/placeholder.js to get some placeholders into IE. Works a treat for input types of text and password.
But just does'nt seem to load for Text Areas. Does anyone know of a line of code I could add to that, or maybes a little bit of jQuery or JavaScript to execute to get it to load.
Thanks in advance.
instead of $(':text[placeholder],:password[placeholder]') use $(':text[placeholder],:password[placeholder],textarea[placeholder]')
For all inputs and textarea:
$('input[placeholder],textarea[placeholder]')
<script type="text/javascript">
if(navigator.userAgent.indexOf("MSIE") > 0 )
{
$(function()
{
var input = document.createElement("input");
if(('placeholder' in input) == false)
{
$('[placeholder]').focus(function()
{
var i = $(this);
if(i.val() == i.attr('placeholder'))
{
i.val('').removeClass('placeholder');
if(i.hasClass('password'))
{
i.removeClass('password'); this.type='password';
}
}
}).blur(function()
{
var i = $(this);
if(i.val() == '' || i.val() == i.attr('placeholder'))
{
if(this.type=='password')
{
i.addClass('password'); this.type='text';
}
i.addClass('placeholder').val(i.attr('placeholder'));
}
}).blur().parents('form').submit(function()
{
$(this).find('[placeholder]').each(function()
{
var i = $(this);
if(i.val() == i.attr('placeholder')) i.val('');
});
});
}
});
}
</script>