I have a menu that shows or hides content when you click menu items. The JQuery looks like this:
$(document).ready(function() {
$("#bioLink").click(function(){
$("#about").show(1000);
$("#portfolio, #contact, #expand").hide(1000);
}); // end bio-click
$("#portfolioLink").click(function(){
$("#portfolio").show(1000);;
$("#about, #contact, #expand").hide(1000);
}); // end portfolio-click
$("#contactLink").click(function(){
$("#contact").show(1000);
$("#about, #portfolio, #expand").hide(1000);
}); // end contact-click
}); // end ready
In an older version of the site, all content is hidden when the page first loads, with this CSS rule:
#about, #portfolio, #contact {
display:none;
}
That CSS now wreaks havoc with a carousel I have since installed in the portfolio section.
Is there something I can do with the script to hide the content upon loading? Given that the existing script doesn't interfere with the carousel, this could be a proper solution.
There's several options to hide content on a page.
display: none;
This is the one you're currently uses, which collapses content (i.e. the element doesn't take up any space on the page.
visibility: hidden;
This hides content, but doesn't collapse, so the element while not visible still takes up the same amount of space on the page (useful if you want to hide and show elements in a list or navbar without making things jump back and forth).
opacity: 0;
Similar to visibility hidden, but still allows a user to trigger events or tab to the element.
There's a couple others, but these are the main three that would be useful. Would you mind elaborating on the wreaking havoc part? It's a bit difficult to provide you with the right tools given the problem is a bit vague.
Simply initialize the content IDs to be initially hidden on document load like this:
$( document ).ready(function() {
$( "#about, #portfolio, #contact" ).hide();
});
Then let the conditional script follow this to show and hide as ordered by the click event. Initializing the hide allows for other things to work without your script trying to run at the same time. <-- not sure if I explained that correctly
Related
I've recently installed the smooth-scroll library from cferdinandi and the smooth-scroll feature works like a charm.
The anchors added to my text using a CMS where looking like this:
<span id="authentication" class="ancre"></span>
The ID being different each time, regarding what I'm talking about in my text. And it works fine.
My problem is that the smooth-scroll library seems to remove the class when it runs, therefore my class='ancre' does not show when the anchor is called. Class being:
.ancre:target{
background-color: #131b24;
color: white;
}
So what I did it that I removed the "target" parameter of my class and added a function to my JS file to add the class after the smooth-scroll is run. It looks like this:
CSS in css/app.css
.ancre{
background-color: #131b24;
color: white;
}
JS in js/app.js
after: function () {
var className = 'ancre';
document.querySelector('.' + className).classList.remove(className);
document.getElementById(anchor.id).classList.add(className);
}
But it does not work and I just couldn't figure out why.
You can try it by pressing the buttons "2-step authentication" and/or "Mobile" on this page.
I'm not a coder, more a designer and I would be happy to get some help here.
Thank you all for your help,
Best,
Kwint
You can use the scrollIntoView javascript function without the need for a library.
https://codepen.io/gezzasa/pen/gzXPbJ/
first I had to set the containers to position: relative; and then set the anchor to position: absolute; top: 0;. with the option on the JS set to block : 'center' it will now only scroll till the anchor is in the middle of the screen.
var smoothScroll = function(e, me) is the function I declared and gets fired on the onclick of the a tag. There are different ways to run the function but this is easy enought. I passed in event on the onclick for the event(event thats fired when you click) and this to tell the script what I clicked on.
e.preventDefault() will prevent the a tag from firing its default function which will reload the page with the href provided. in this case it will append an ID without that script.
document.querySelector(me.getAttribute('href')) will get the ID that it needs to scroll to and then the scrollIntoView function will scroll according to the options that you give it.
Hope I explained it well...I don't have a ton of experience explaining JS.;
I am using Javascript to hide a search box until a box is clicked. That works fine.
However when the page is first loaded, you can see the search box there and then it disappears once the page has fully loaded.
How can I make it hide and not show at all until my button is clicked..
This is the Javascript:
<script type="text/javascript">
$(function(){
$(".search").hide();
$(".clicktosearch").on("click", function(){
$(".search").slideToggle("600");
.search is the actual search box
.clicktosearch is the box the user must click for the actual search box to show up.
They only thing I have tried is to move the Javascript above the html box but, to no luck, now I am asking you all on SOF.
You need to use
display:none
in the CSS to hide it initially. The javascript only executes after the page has loaded so you will always see it briefly before the javascript kicks in.
This is what you need:
CSS
.search { display:none;}
JS
$(".clicktosearch").on("click", function(){
$(".search").slideToggle("600");
});
I removed $(".search").hide(); because it's unneeded and may cause other problems. (JQuery doesn't need to hide something that's already hidden via CSS.)
BTW: If there's only one element that matches .search, it should really be an id and so #search. Same goes for .clicktosearch.
Hide it using css .
.search { display:none;}
The reason for this happening is the javascript getting loaded after the css and HTML take affect.
Hide it using CSS, the time lag before the div hides will be less.
You have the .hide inside of document.ready, $(function(){ is short for $(document).ready(function() {
So just put it before the document.ready and it should work...
<script type="text/javascript">
$(".search").hide(); //moved this line too here
$(function(){
$(".clicktosearch").on("click", function(){
$(".searchr").slideToggle("600");
although, What I personally would prefer is just in your css hide it.
Like so,
.search { display: none; }
You'll have to touch the CSS.
.search {
height: 0px;
}
Then in your JavaScript:
$(".clicktosearch").on("click", function(){
$(".search").slideToggle("600");
});
I'm one of those people who never was bother to learn JavaScript and went straight for jQuery.
I'm writing simple script to hide everything till page is fully loaded - and because my jQuery is loaded after html/css/images I planning to put small script in the header.
So in jQuery it would be
$('body').css('display','none');
Pure JavaScript:
document.body.parentNode.style.display = 'none';
But than:
$(window).load(function() { $('body').css('display', 'block').fadeIn(3000); });
Has not animation? Why?
What I'm trying to do:
#1 hide everything(body) with javascipt till everything is loaded (there is no jQuery at this state as is being loaded at the end)
#2 show everthing(body) with animation of fadding (with jQuery - as is loaded at this state)
Any help much appreciated.
Pete
The equivalent to
$('body').css('display','none');
is
document.body.style.display = 'none';
$('body') selects the body element, but document.body.parentNode obviously selects the parent of body.
And shouldn't it be just
$('body').fadeIn(3000);
?
I asked because I assumed you already got the code working with only jQuery. But apparently you haven't, so again, it has to be $('body').fadeIn(3000); only, otherwise you make the element visible immediately and there is nothing to animate anymore.
See a demo: http://jsfiddle.net/fkling/Q24pC/1/
Update:
$(window).load is only triggered when the all resources are loaded. This could take longer if you have images. To hide the elements earlier, you should listen to the ready event:
$(document).ready(function() {
// still don't know why you don't want to use jQuery.
document.body.style.display = 'none';
});
or hide the elements initially with CSS
body {
display: none;
}
To make sure that users with disabled JavaScript can see the page, you'd have to add
<noscript>
<style>
body {
display: block;
}
</style>
</noscript>
in the head after you other CSS styles.
Update 2
Seems that setting the CSS property directly causes problems in some browsers. But using $('body').hide() seems to work: http://jsfiddle.net/fkling/JaLZU/
I'm not that clear on what your question really is, but if I'm on the right track you don't need the .css('display', 'block') part for the animation. Get rid of that, so it's just $('body').fadeIn(3000); and the animation should work fine.
RESOLVED
I found the issue and am sorry to say it is quite idiotic. On some pages there was an extra closing bracket after the script type=javascript. Apparently Chrome and Firefox ignore the issue but Safari and IE threw up display errors. Thank you to everybody for the excellent support and guidance on the matter. of note, i decided to go with the .show() method as it seemed most logical.
I have the following javascript snippet at the top of my page which validates 2 fields within a login form:
<script type="text/javascript">
$(function() {
$('#submit').click(function () {
$('#login_form span').hide();
if ($("input#user").val() == "") {
$("span#user").show();
$("input#user").focus();
return false;
}
if ($("input#pw").val() == "") {
$("span#pw").show();
$("input#pw").focus();
return false;
}
var overlay = $('<div id="overlay">');
$('body').append(overlay);
});
});
</script>
When a form is submitted (submit is clicked) the function is run which checks to make sure the 2 fields: pw and user have some content. If they do, it opens an overlay script to cover the screen. The function above sits at the top of my screen (in the head)
The CSS for the overlay is:
#overlay { background:#000 url(../images/loader.gif) center no-repeat; opacity:0.5; filter:alpha(opacity = 50); width:100%; height:100%; position:absolute; top:0; left:0; z-index:1000; }
In Chrome:
The function works well but the 'loading' image within the overlay does not show.
In Firefox:
Nearly the same as Chrome but the loading image DOES work if the javascript call is made at the bottom of the page.
In IE:
if the function stays in the head, my page is completely blank (though no server errors). Once I move to the bottom of the page, the loading image appears randomly and if it does, it is VERY slow in its animation.
perhaps I am doing something wrong but trying to build for all three browsers on something this simple is making me bonkers.
Any suggestions for improvement?
Thanks ahead of time.
UPDATE
First off thank you all for your suggestions so far. I have tried and number and get various results from each (as well as different results when run locally versus on our apache server).
One page in particular that seems to be of fury is this one:
https://www.nacdbenefits.com/myadmin/password-reset
In IE, the page just opens to a grey screen. I have updated the code to imbed the div id in the page itself and simply 'show' on a submit but apparently something else is catching a long the way.
UPDATE 2
Something else must be causing this to malfunction. When i strip the code even to:
<script type="text/javascript">
$(function() {
});
</script>
unless I move the code to the bottom of the page, IE just shows a dark screen with nothing there (no server errors again and no JS errors at page bottom).
I would have the overlay already existant in the page's HTML but hidden (display: none;), so that the background image is preloaded. Then, once my button is clicked, I would .show() it.
I think your code has a bug. I'm suprised Firefox manages to make something out of it. According to .append() you should pass it a string or an element. You're attempting to pass it a jQuery selector result (and a broken one at that). Remember, in jQuery $() is a function call! Compare your code (condensed):
$('body').append($('<div id="overlay">'));
with this (no $() call):
$('body').append('<div id="overlay" />');
or this (note closing the div tag):
$('body').append($('<div id="overlay" />'));
Have you considered having the overlay as part of your page's code, but simply display: none by default, and then simply .show()ing it when you want it to appear?
The head/bottom-of-page inconsistency can be fixed by running your binding when the DOM is ready, like this:
<script type="text/javascript">
$(document).ready(function() {
$('#submit').click(function () {
// code omitted for brevity
});
});
</script>
I have a heavy-jquerized page with some links, various user inputs and such.
I use jquery, with actions defined in a
$(document).ready( function() {
....
} );
block.
But while the page is loading (or, even worse - reloading), and a user clicks a link, the href action from it is triggered, as the javascript isn't loaded / active yet.
I wanted to block it somehow. One way that came to my mind is to put a transparent div over whole document, that would receive the click events instead of the layer below it. Then, in my .ready function in javascript, I could hide that div making it possible to use the page.
Is it a good practice? Or should I try some different approach?
Another option is to use the jQuery BlockUI plugin (which probably usew the same or similar idea behind the scenes).
If you don't want your links to act like links (ie their href is never meant to followed), why make them links in the first place? You'd be better served by making your clickable elements a div or span (something without a default action), and attaching the click handler as per normal.
I'd really advise against blocking the ui with a div - it seems the entirely wrong approach, making the page non-functional to someone with JS disabled, as well as blocking other common tasks like copying text.
In light of the clarification, to block the UI only if JS is enabled, but not yet loaded, I'd suggest the following.
HTML (first thing after body):
<script type="text/javascript">document.write('<div id="UIBlocker">Please wait while we load...</div>')</script>
CSS:
#UIBlocker
{
position: fixed; /* or absolute, for IE6 */
top: 0;
bottom: 0;
left: 0;
right: 0;
}
Or, if you prefer not to use document.write, leave the UIBlocker div as straight HTML at the top of body, but have the following in head
HTML:
<noscript>
<style type="text/css">
#UIBlocker { display: none !important; }
</style>
</noscript>
This will ensure it does not block for non-JS enabled browsers
A transparent div could work, assuming it’s positioned above everything. (I’m never quite clear how visible an element has to be to receive click events.)
You might want to make the div visible though; it could be equally confusing for visitors if they can see everything on the page, but not click it.
You’ll probably need to use JavaScript to make the div as tall as the page though.
The overlay DIV should work. Another option would be to place all the content inside a hidden container visibility: hidden then toggle to visible as the last $(document).ready statement.
As you said it yourself javascript isn't loaded yet. Maybe the css isn't loaded either.
so something with visual element will not work i think. IF you want to do some with the viaual elements (css) you have to hardcode it in the html node <tagname style="blabla">
You could possibly add the href behavious in a later stadium when the js is loaded.
What you get is a <span> with a title and this should set the behaviour or something. I used a title, but can be a different attribute.
This doesn't use any jquery, only for loading
$(document).reade(function () {
relNoFollow();
});
function relNoFollow() {
var FakeLinks = document.getElementsByTagName('span');
if( FakeLinks.length > 0 ) {
for( var i = 0; i < FakeLinks.length; i++ ) {
if( FakeLinks[i].title.indexOf( 'http://' ) != -1 ) {
FakeLinks[i].onmouseout = fakelinkMouseOut;
FakeLinks[i].onmouseover = fakelinkMouseOver;
FakeLinks[i].onclick = fakelinkClick;
}
}
}
}
function fakelinkMouseOver() {
this.className = 'fakelink-hover';
}
function fakelinkMouseOut() {
this.className = 'fakelink';
}
function fakelinkClick() {
window.location.href = this.title;
}