I am trying to add an image that pops up for mobile viewers upon website entrance. I have a rough idea of the things that must go into the code but not sure exactly how to put things together. Could anyone help me out or point me in the right direction?
I am using cargo collective to build my website if that helps.
I'd like to do something similiar to: https://badbadbadbad.com/ (whenever viewed on a phone)
J
You can use JavaScript's onload function to make an action happen when a page loads. Example below just shows an alert box with some text, but it's a start.
Post your code and we can help further.
<!DOCTYPE html>
<html>
<head>
<title>Pop Up on Page Load</title>
<script>
document.onload(alert("This is my image."));
</script>
</head>
<body>
<p>This is my website.</p>
</body>
</html>
A simple approach could be:
fiddle.
HTML:
<div class="regularBox"></div>
<div class="modalBox">
<img src="https://cdn.pixabay.com/photo/2016/05/02/22/16/apple-blossoms-1368187_960_720.jpg">
<span class="close">×</span> <!--Click X to close-->
</div>
JS:
function showPopup() {
document.querySelector('.modalBox').style.display = 'block';
}
showPopup(); // show modal image.
function closePopUp() {
document.querySelector('.modalBox').style.display = 'none';
}
document.querySelector('.close').addEventListener('click', closePopUp); // hide modal image
CSS:
img {
width: 80%;
}
.close {
font-size: 50px;
margin-left: -40px;
cursor: pointer;
}
.modalBox {
display: none;
}
.regularBox {
z-index: -1; // placed behind modalbox
position: absolute;
background-color: pink;
width: 500px;
height: 400px;
Related
I am using the divi theme for wordpress, I have selected the code module and I am trying to get a picture of a website to scroll when hovered over and to reverse scroll when the hover ends...therefore returning the image back to its original location. There is an image in front of the website. Basically this gives the appearance that the user is scrolling down the webpage from a computer. The idea was originally discovered at dividojo.com (Good idea dividojo!) https://www.dividojo.com/website-design/ it is located towards the bottom of the page.
I have the complete code fully functional outside of wordpress with the following code.
<!DOCTYPE html>
<html>
<head>
<title>animatingimage</title>
<link href="css/style.css" rel="stylesheet" />
<script type="text/javascript" src="jquery-3.2.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#insideComputer").hover(function() {
$("#insideComputer").stop(true).animate({
marginTop:"-1210px"
}, 5000);
},
function(){
$("#insideComputer").stop(true).animate({
marginTop:"0px"
}, 5000);
});
});
</script>
</head>
<body>
<div id="bigDiv">
<img id="computer" src="img/computer3.png">
<div id="imgDiv">
<img id="insideComputer" src="img/website1.png">
</div>
</div>
</body>
</html>
and here is the attached external CSS.
#bigDiv {
background-color: #F5F5F5;
width: 500px;
height: 500px;
margin: 200px;
}
#imgDiv{
width: 463px;
height: 269px;
position: relative;
top: -430px;
left: 19px;
overflow: hidden;
}
#insideComputer {
width: 100%;
}
Like I said, the above functions appropriately. I am trying to input this into the divi theme. I have modified the above code to this:
<style>
#bigDiv {
background-color: #F5F5F5;
width: 500px;
height: 500px;
margin: 200px;
}
#imgDiv{
width: 463px;
height: 269px;
position: relative;
top: -430px;
left: 19px;
overflow: hidden;
}
#insideComputer {
width: 100%;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#insideComputer").hover(function() {
$("#insideComputer").stop(true).animate({
marginTop:"-1210px"
}, 5000);
},
function(){
$("#insideComputer").stop(true).animate({
marginTop:"0px"
}, 5000);
});
});
</script>
<div id="bigDiv">
<img id="computer" src="http://localhost/kaiserkreations/wp-
content/uploads/2017/08/computer3.png">
<div id="imgDiv">
<img id="insideComputer" src="http://localhost/kaiserkreations/wp-
content/uploads/2017/08/website1.png">
</div>
</div>
With all of the documentation I have read, I should be able to place this inside of the content section of the divi code module and have it work appropriately. When I place this chunk into the module, I see the image, and the formatting is appropriate, but the animation is dead. I do know that Jquery is working correctly, because when i test with an alert function it works fine.
Any ideas where I've gone wrong. I looked but was unable to find anything on stack overflow similar.
Thanks guys!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
I have discovered that the code above does in fact work as posted. However, it appears that the current version of Jquery is not inherently included in the newest divi theme. so i simply placed it above the script posted above and it started to function. I am noticing some errors thrown in the console, however everything is functioning.
It is also working with placing the jquery embed in the head directly. I prefer this method more.
I am trying to implement a loader for a background image until the whole image is completely loaded using jquery. I have tried the various method to do this. Since the image is specified in the CSS I could not specify the exact image id or class. Finally I end up doing this ,
$(window).load(function() {
$(".loader").fadeOut("slow");
})
But doing this it is happening when the window is loaded. I wanted to happen it until the image is completely loaded.
And the background image comes under the following section
<div class="loader"></div>
<div class="test_banner services_banner">
</div>
It would be great if somebody give a helping hand to manage this case. Thanks in advance.
Maybe you could use a multiple background-image
example:
div {
height:90vh;
width:90vw;
background:url(http://lorempixel.com/1200/800/nature/) center,
url(http://www.jqueryscript.net/demo/Simple-Customizable-jQuery-Loader-Plugin-Center-Loader/img/loader1.gif) center center no-repeat ;/* this works once/untill image has been loaded */
<div></div>
The Gif background remains here but is painted behi,d the big image. It is seen as long as the big image is not loaded ...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Create a "Please Wait, Loading..." Animation</title>
<style>
.overlay{
display: none;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 999;
background: rgba(255,255,255,0.8) url("http://www.jqueryscript.net/demo/Simple-Customizable-jQuery-Loader-Plugin-Center-Loader/img/loader1.gif") center no-repeat;
}
body{
text-align: center;
}
/* Turn off scrollbar when body element has the loading class */
body.loading{
overflow: hidden;
}
/* Make spinner image visible when body element has the loading class */
body.loading .overlay{
display: block;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
// Initiate an Ajax request on button click
$(document).on("click", "button", function(){
// Adding timestamp to set cache false
$.get("/examples/php/customers.php?v="+ $.now(), function(data){
//$("body").html(data);
});
});
// Add remove loading class on body element depending on Ajax request status
$(document).on({
ajaxStart: function(){
$("body").addClass("loading");
},
ajaxStop: function(){
$("body").removeClass("loading");
}
});
</script>
</head>
<body>
<button type="button">Get Customers Details</button>
<div class="overlay"></div>
</body>
</html>
I have a webpage that uses tubular.js script to show youtube video as a site background. There's a sentence on tubular page:
First, it assumes you have a single wrapper element under the body tag
that envelops all of your website content. It promotes that wrapper to
z-index: 99 and position: relative.
So following that, I wrote a simple html/css code:
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
#logocontainer{
position: absolute;
top: 20%;
margin-top: -35px;/* half of #content height*/
left: 0;
width: 100%;
text-align:center;
}
#logo {
margin-left: auto;
margin-right: auto;
height: 75px;
}
</style>
<body>
<div id="wrapper" class="clearfix">
<div id="logocontainer">
<div id="logo">
<img src="img/logo.png"/>
</div>
</div>
</div> <!--wrapper-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.tubular.1.0.js"></script>
<script type="text/javascript">
$(function() {
var options = {
videoId : '9JXVUP1hyxA',
start : 1
};
$('body').tubular(options);
});
</script>
</body>
</html>
but now, when I run it - I see only youtube video without my logo on top... I know the logo is there, because when I comment out the youtube script I can see it, however I don't see it when the video is present. I tried to add z-index:99 to #logo but that didn't do any magic... Can you help me with that?
EDIT:
As A. Wolff suggested below, I added to my css:
#wrapper{
z-index:99;
position: relative;
}
still though - no good results, video is still on top..
I see in their own Tubular they use this little script...
$('document').ready(function() {
var options = { videoId: 'ab0TSkLe-E0', start: 3 };
$('#wrapper').tubular(options);
// f-UGhWj1xww cool sepia hd
// 49SKbS7Xwf4 beautiful barn sepia
});
Just adding this keeps everything on top.
Use the code in this Fiddle as a sample.
Your must use z-index with position: relative/absolute.
Also your z-index in video must be less than in your blocks.
video {
position: absolute;
z-index: 1;
}
div {
position: relative;
z-index: 2;
}
I'm trying to show a fixed div using the show function of jquery. The show function works, but not when I try to add an effect with jquery ui. I have both jquery and jquery ui linked in an external file via a php include. When I use the inspector in chrome, I can see the blue box of the div I'm trying to show when I click the show button, yet the page remains unchanged.
This is my html:
<link rel="stylesheet" href="js/jquery-ui.min.css">
<script src='js/jquery-2.1.1.min.js'></script>
<script src="js/jquery-ui.min.js"></script>
<div class="twitterbar" id="baremily">
<a class="twitter-timeline" href="https://twitter.com/EmilyPalmaers" data-widget-id="number">Tweets by #EmilyPalmaers</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
<div class="twitterbar" id="barcharlotte">
<a class="twitter-timeline" href="https://twitter.com/CPalmaers" data-widget-id="number">Tweets by #CPalmaers</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
This is my jquery:
<script>
$(document).ready(function()
{
$("#twitteremily").click(function(e)
{
e.preventDefault();
if( $('#baremily').is(':visible') ) {
// it's visible, do something
$('#baremily').hide("blind");
}
else {
// it's not visible so do something else
if ($('#barcharlotte').is(':visible'))
$('#barcharlotte').hide("blind");
$('#baremily').show("blind");
}
});
$("#twittercharlotte").click(function(e)
{
e.preventDefault();
if( $('#barcharlotte').is(':visible') ) {
// it's visible, do something
$('#barcharlotte').hide("blind");
}
else {
// it's not visible so do something else
if ($('#baremily').is(':visible'))
$('#baremily').hide("blind");
$('#barcharlotte').show("blind");
}
});
}
);
</script>
and this is the css (note, the div I'm trying to show has a class and ID tag:
.twitterbar
{
position: fixed;
display: none;
top: 35%;
left: 50%;
margin-top: -10em;
margin-left: -10em;
z-index: 99999;
height: 20em;
width: 20em;
}
#media (min-width:961px) {
.twitterbar
{
top:50%;
margin-top: -16rem;
margin-left: -16rem;
height: 32rem;
width: 32rem;
}
}
I'm pretty much clueless at the moment, thanks in advance
http://jsfiddle.net/a9dbeo1o/
Recheck your script references.
To make sure jQuery is ready, try:
if ( jQuery.isReady ) {
alert('jQuery is ready');
}
Edit:
Just a note: I also see you have your jquery css file inside your js folder.
Edit 2:
Updated fiddle:
http://jsfiddle.net/a9dbeo1o/2/
I ran into a unique request for a HTML page. I needed one image to link to a website and an second image which would sit on top of the first that opens the same website in a new window. In effect, the second image is a quasi-maximize button placed in the top right-hand corner.
The trick is the "maximize button" needs to only appear when hovering over the first image.
Special thanks to these two posts. I was able to piece together a solution. I am sharing my work below in the approved answer.
Show div on hover with only CSS
How do I position one image on top of another in HTML?
Here is a sample of the CSS, JavaScript and HTML I used to get the desired effects I wanted. Please let me know where I can improve.
Note: I used JavaScript to guarantee the link would open in a new window. If you know a better way to do this. Please share. It bugs me that I have anchor tags using onClick events.
<html>
<head>
<style type="text/css">
.bannerContainer
{
position: relative;
left: 0;
top: 0;
display:inline;
}
.myBanner
{
position: relative;
top: 0;
left: 0;
}
.myBanner:hover + .newWindowButton
{
display: inline;
}
.newWindowButton
{
display: none;
}
.newWindowButton:hover
{
display: inline;
}
.newWindowButton img
{
/*This positions the maximize button. You will have to play with the positioning to get it just right for your work. This is what worked for me.*/
position: absolute;
top: -106px;
left: 170px;
width:30px;
height:30px;
}
.pointer
{
cursor: pointer;
}
</style>
<script type="text/javascript>
function myLinkClick(Url, isInNewLimitedWindow) {
if (isInNewLimitedWindow) {
window.open(environmentUrl, "_blank", "toolbar=no, scrollbars=no, menubar=no, resizable=yes");
}
else {
window.open(environmentUrl);
}
}
</script>
</head>
<body>
<div class="bannerContainer">
<a class="myBanner pointer" onclick="myLinkClick('http://myWebsite.com', false)">
<img src="firstImage">
</a>
<a class="newWindowButton pointer" onclick="myLinkClick('http://myWebsite.com, true')">
<img src="secondImage">
</a>
</div>
</body>
</html>