I am not really a coder but I'm trying to run some basic javascript on a landing page builder (Samcart) so that an image will be hidden then appear after the user has been onpage for a certain length of time.
I have tried a few things. So far, I was able to bring in the image from imgur successfully. So I can display it fine. I'm just struggling to know what javascript code to use.
I found some javascript code that should enable this for me:
<script>
$("div").hide();
setTimeout(function(){
$("div").show();
},3000);
</script>
This is the code I created on the page to pull the image from imgur:
<div class="valuestack">
<img src="https://i.imgur.com/TrGitqf.png" width="60000" height="1300">
</div>
I honestly don't really know what I'm doing and need some clarification.
Thank you in advance,
Nathan
Hey #Nathan here is a JavaScript solution to your problem.
You are using setTimeout() function which expects a function to be passed to it.
The syntax of the above function is as below -
setTimeout(function(){
document.getElementById('valuestack').style.visibility = 'visible';
}, 2000);
Additionally, instead of hiding it through JavaScript/JQuery, you might consider just applying a CSS style to handle it being hidden by default (i.e. display: none) and then simply showing it within the body of your setTimeout() function call.
function showImage() {
if (document.getElementById("valuestack") != null) {
document.getElementById('valuestack').style.visibility = 'hidden';
setTimeout(function() {
document.getElementById('valuestack').style.visibility = 'visible';
}, 2000);
}
}
showImage();
.v-image {
width: 50px;
height: 50px;
}
.v-stack {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
body {
background-color: black;
}
<body>
<div id="valuestack" class="v-image v-stack">
<img src="https://i.imgur.com/TrGitqf.png" width="600" height="1300" >
</div>
</body>
The code you posted uses jQuery. You will need to include jQuery on the page for it to work.
Also, this code will hide and show all <div> elements on your page. You'll probably want to change the code to target div.valuestack instead.
There are two things here
You need to include JQuery as below. (there are more methods to include, this is just one way)<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
The method that you have written in script tag is never called. So this small code must be called when your landing page is load.
<script>
window.onload = function() {
$(".valuestack").hide();
setTimeout(function() {
$(".valuestack").show();
}, 3000);
}
</script>
Related
I know you can navigate to a section in the page using anchor tags, but doing this adds unwanted keywords to the URL.
So if the original URL was www.xyz.com, clicking on an anchor tag abc would change the URL to www.xyz.com/#abc. I do not want the URL to change since this every time you click on "back", it just goes to the previous section that the URL held previously. Is there any way to stop this from happening? Maybe reroute the back button to leave the website or something?
Have you tried using JavaScript? Use scrollintoview function.
Here's an example:
<a onclick="scrollthere()">go to the content<\a>
<h1 id="stophere">This is content</h1>
<script>
function scrollthere(){
var element = document.querySelector("#stophere");
element.scrollIntoView();
}
</script>
Something like that. Onclick is an event. And in brackets we write function that we want to execute when clicked on it. In our case it's scrollthere which scrolls to our h1 element that has is "stophere". It will scroll untill our element won't get into view. You could read more about it here . Good luck with your website. I'm making website as well :).
My solution is to use JS instead of using <a> behavior.
for example
document.querySelectorAll("a").forEach((item, idx) => {
item.addEventListener("click", (e) => {
e.preventDefault();
const hash = e.target.hash;
window.scrollTo({
top: document.querySelector(hash).offsetTop,
behavior: "smooth"
});
});
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.section {
width: 100%;
height: 100vh;
}
.sec-1 {
background-color: salmon;
}
.sec-2 {
background-color: teal;
}
Section 1
Section 2
<div id="sec-1" class="section sec-1"></div>
<div id="sec-2" class="section sec-2"></div>
In my case, I use the scrollTo() property.
Hope this might help you.
You can set your href attribute to empty string.
abc
I want to animate a simple search form. Before the click event, it is hidden behind my fix nav bar (margin-top:-47px). When the user clicks a search button, I want to set the form's margin-top property to 0px so it shows on the page.
jsFiddle
I am using this HTML :
<nav>
<a data-icon="search" class="search-form-toggle"></a>
...
<div class="form search-form">
<fieldset data-icon="search">
<input type="search" placeholder="Search...">
</fieldset>
</div>
And this CSS :
.search-form {
margin-top: -47px;
}
And the following javascript (jQuery) :
$('.search-form-toggle').click(function(){
if($(".search-form").css("margin-top") == "-47px") {
$(".search-form").animate({margin-top: "0px"}, 1000);
} else {
$(".search-form").animate({margin-top: "-47px"}, 1000);
}
return false;
});
When I click the button, it is not working... I guess it is a Javascript issue?
Plus, can I achieve the same result (nice transition) without using jQuery?
The error is in the .animate() it should be:
$(".search-form").animate({'margin-top' : '0px'}, 1000);
and
$(".search-form").animate({margin-top: "-47px"}, 1000);
You forgot the quotes around the margin-top
here's my working fiddle though make sure you add the ajax file that is attached
Fiddle
Here is the working fiddle. You'd forgot to put the quotes.
.animate({"margin-top": "XXpx"});
http://jsfiddle.net/5xxWu/
The answer given were really helpful in debugging my code. However, I went with another option when I found animte.css. It is a CSS library that provides multiple animations for divs and others.
I was also using QuoJS, and I didn't want to add jQuery to my loading time, especially since I am developing for mobile devices.
Here is my final code :
JS :
document.querySelector(".search-toggle").addEventListener("click", function(){
var form = $$(".search-form");
if (form.hasClass('display')) {
form.removeClass('display');
} else {
form.addClass('display animated flipInX');
}
});
CSS :
.search-form {
display:none;
}
.display {
display:block;
}
At first, my div only have the .search-form class, so it is not displayed. I add the .display class with QuoJs with the addClass() function.
The transition are very sleek, thanks to animate.css.
If I set the searchbox display to block then by using JavaScript I can set it back to none, but I have the following code, but after making display none, I can't set it to block display.
#searchbox
{
width: 50%;
height: 400;
float: left;
display: none;
}
document.getElementById('searchbox').style.display = 'block';
Your JavaScript code is fine, you just need to make sure you're running after the element exists. That means in response to a user-generated event, or just using a script element further down in the markup than the #searchbox element.
For instance, this won't work: Live Example | Source
<script>
document.getElementById('searchbox').style.display = 'block';
</script>
<!-- ...other stuff... -->
<div id="searchbox">I'm hidden</div>
...because the element doesn't exist as of the call to document.getElementById.
But this does work: Live Example | Source
<div id="searchbox">I'm hidden, but then shown</div>
<!-- ...other stuff... -->
<script>
document.getElementById('searchbox').style.display = 'block';
</script>
...because the element does exist.
This is one of several reasons for the usual recommendation to put your scripts at the end of the document, just before the closing </body> tag.
More:
YUI Best Practices for Speeding Up your Website
Google Closure engineers on when DOM elements are ready to be used from script
Side note: You have an error in your CSS. height: 400; should be height: 400px; (you need the units). So I suppose if you don't have any content in the div, you might be wondering why you don't see it (and the reason is: because it has no height).
If it is not working then use
<script>
document.getElementById('searchbox').style.visibility = 'hidden';
</script>
May be it will help you there
Well, you can then define two JavaScript functions, one to hide and one to show your searchbox, as you said it works fine if you set it to block initially.
Okay, then use the hide function to hide your searchbox on pageload event and on onclick event call hide function. It will definitely work.
#searchbox
{
width:50%;
height:400;
float:left;
display:block;
}
function hide()
{
document.getElementById('searchbox').style.display = 'none';
}
function show()
{
document.getElementById('searchbox').style.display = 'block';
}
It should be set to .style.display = "inline"; instead of block. Block is for div and p (all the way across). Inline is for span and input (not all the way across).
I know this is simple, but I can't seem to get this to work.
When the page loads, it checks the browser. if its chrome I want it to hide a div, but show it if its anything else.
it detects the browser ok, since i checked using alerts, but the hiding bit doesn't.
Can you help
function browserTest() {
var browser = /Chrome[\/\s](\d+\.\d+)/.test(navigator.userAgent);
if (browser) {
document.getElementById("chromeBox").style.visibility = "hidden";
//alert("chrome");
}
else {
document.getElementById('chromeBox').style.visibility = 'visible';
//alert("not chrome");
}
}
You may have few problems here:
1) browserTest is executed before div is actually load (if it is executed in <head> section with code like below, for example):
<head>
<script>
function browserTest() { .... }
browserTest(); - div is not loaded here yet and getElementById will return nothing.
</script>
To fix this - put that script section after chromeBox div html markup
or execute browserTest in onload event (that will guaranty that div is already loaded and getElementById will find it):
<head>
<script>
function browserTest() { .... }
</script>
....
</head>
<body onload="browserTest()">
....
2) Check if your div really has an ID chromeBox. IDs are case sensitive, so document.getElementById("chromeBox") will not find <div id="ChromeBox">
Remember that visibility:hidden will make a div invisible, but space for it will be still reserved. Maybe you should better use style.display = "none"/style.display = "block"
Also, learn how to use developer tools. All browsers have it. For firefox you may need to install Firebug. Just call it using F12 and check console to see if any error is shown there.
It seems that we cant figure out what happens with your DOM so here is an example: http://jsfiddle.net/mgechev/uwc3B/2/
Here is the code:
JavaScript
function browserTest() {
var browser = /Chrome[\/\s](\d+\.\d+)/.test(navigator.userAgent);
if (browser) {
document.getElementById("chromeBox").style.visibility = "hidden";
//alert("chrome");
}
else {
document.getElementById('chromeBox').style.visibility = 'visible';
//alert("not chrome");
}
}
browserTest(); //should be called on DOM ready
HTML
<div id="chromeBox">
It's not Chrome!
</div>
CSS
#chromeBox {
width: 100px;
height: 100px;
background: #ccc;
position: absolute;
}
You should call browserTest at the end of the body or on DOM ready.
Thanks a lot everyone. its working now, just needed to call the function after the div. I'm new to javascript, so I'm still making basic errors like this.
Thanks
I have a page with a linked image, where the link takes a bit of time to load. Therefore, users tend to click multiple times on it. This occasionally causes errors to crop up in the code. How do I prevent users from clicking on the link more than once?
In an attempt to remedy this, I changed the link to an onClick event and then in the function I used the code:
$('#myImageId').unbind('click');
window.location.href = "myLink";
However, that doesn't seem to be helping. Also, I'd prefer to keep it a simple linked image instead of using javascript.
Once solution is to add a class to the element that is used as a flag to determine of the code should run.
Here's an example: http://jsfiddle.net/qLhr8/
$('#myImageId').click(function() {
var $th = $(this);
if( !$th.hasClass( "pending" ) ) {
// Add the "pending" class, so subsequent clicks will not
// run the code inside this if()
$th.addClass( "pending" );
window.location.href = "myLink";
// you could do a setTimeout to remove the class
// if the new page never loads
}
});
With the added class, you can also change the look of the image (lower its opacity perhaps) to indicate that it shouldn't be clicked again.
.pending {
opacity: .4;
filter:alpha(opacity:40);
cursor: wait;
}
<img src="..." id="myImageId">
$('#myImageId').bind('click', function() {
$(this).unbind('click');
/* do long time task....
});
if your image is wrapped by a link the code will be
<img src="..." id="myImageId">
$('#myImageId').parent().bind('click', function(evt) {
$(this).unbind('click');
/* do long time task....
evt.preventDefault();
});
A hacky CSS solution that might/might not work: create another image element, without the link and make it a sibling to the link, like this:
<div>
<img src="my_img.png" id="img_link" alt="GO" />
<img src="my_img.png" id="img_nolink" alt="GO" />
</div>
Now apply this CSS:
#img_nolink { display: none; position: relative; top: -200px; /* Height of the image */ }
#link:active + #img_nolink { display: block; }
This should show the non-link image when the link is clicked (theoretically).