I got the code from here, the main solution by rossipedia:
fixed sidebar until a div
Here's my Tumblr page and the part of the code the script is influencing (main is replaced with content):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
...
<style type="text/css">
#sidebarwrap {
margin: 0 0 1.5em;
width: 16.2em;
float: left;
position: relative;
}
#sidebar {
margin: 0 0 1.5em;
width: 16em;
height: 570px;
position: absolute;
}
#sidebar.fixed {
position: fixed;
top: 0;
}
#footer {
border-top: 4px solid {color:Footer Border};
background: {color:Footer Background};
color: {color:Background};
clear: both;
margin: 0;
overflow: auto;
padding: 0 0.5em;
}
#content {
margin-bottom: 4.5em;
margin-left: 18.5em;
min-width: 500px;
min-height: 550px;
}
</style>
</head>
Body
<body>
<div id="contain">
<div id="sidebarwrap">
<div id="sidebar">
...Stuff...
</div>
</div>
<div id="content">
...Stuff...
</div>
</div>
<div id="footer">
<div id="footer-container">
...Stuff...
</div>
</div>
I then included the the script right before the /body as so:
<script type="text/javascript">
...Script...
</script>
I keep spell checking and making sure everything is in order, but it all just won't work. At least not for that JS. The other JS's I used work just fine... The script is supposed to make my side bar scroll with the user and then stop right before overlapping the footer. Yet, the script acts likes its not even there, the sidebar doesn't move a single inch...
Heck, I even tampered with the original on its Fiddle page to make it the same layout and ordering as my page, and it still worked just fine.
Am I missing something? Everyone keeps talking about JQuery, and I'm not entirely sure what that is or if I'm supposed to use it... If someone could help me see what I'm doing wrong, I'd really appreciate it! :'D
It looks like you do need to load jQuery on your page to use the code you added. jQuery is a JavaScript library; it provides the "$" function.
To load jQuery in your page, add this before your fixed sidebar code:
<!-- Note that we have a closing tag right after the opening tag here. -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
// Your code here
</script>
Related
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;
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 have a block of text and it want it to be above the block's background color and below the block's background image. I know I could just create multiple blocks and z-index them. I'm wanting to keep the code as clean as possible and not have a bunch of unnecessary stuff.
I'm guessing that the answer is "no", but maybe you guys know something I do (maybe a nifty new background property or JavaScript function).
HTML Code:
<section role="main" id="content">
<h1 class="pageheading">Home Page</h1>
</section>
CSS Code:
#content {
background-color:#69583b;
background-image:url(tattoo-256x256.png);
background-position:center bottom;
background-repeat:no-repeat;
}
Obviously, as it stands, the text "Home Page" sits on top of the image.
The logical thought would simply be to use <img> and position:absolute it, but, again, that's not my intention. I know multiple, other, ways it can be done. I'm just trying to find out if I can do it, this way.
You could do it with a CSS pseudo class. (I've added in opacity just as part of the demo):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
#content {
background-color:#69583b;
background-position:center bottom;
background-repeat:no-repeat;
position: relative;
}
#content::after {
content: "";
position: absolute;
z-index: 2;
width: 100%;
top: 0; bottom: 0; left: 0; right: 0;
background: url(http://placehold.it/256x256);
opacity: 0.8;
}
</style>
</head>
<body>
<section role="main" id="content">
<h1 class="pageheading">Home Page</h1>
</section>
</body>
</html>
I'm trying to get a simple vertical splitter bar working using
jQuery UI Layout 1.30.0.3079-rc. Here is my test page:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery UI Layout Vertical Splitter</title>
<link type="text/css" rel="stylesheet" href="../Content/jquery.ui.layout.css" />
<style type="text/css">
body {
font-family: Calibri;
font-size: 11pt;
margin: 0px;
}
.RequiredBorder {
border: 3mm solid silver;
margin: 3mm;
padding: 3mm;
}
.ui-layout-center, .ui-layout-east, .ui-layout-west, .ui-layout-north, .ui-layout-south {
border: 1px solid purple;
}
#SplitContainer {
border: 1px solid blue;
}
</style>
<script type="text/javascript" src="../Scripts/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="../Scripts/jquery-ui-1.8.23.min.js"></script>
<script type="text/javascript" src="../Scripts/jquery.layout.min.js"></script>
<script type="text/javascript">
var myLayout;
$(document).ready(function () {
myLayout = $('#SplitContainer').layout({
center__minWidth: 100,
west__minSize: 100,
west__size: .5, // 50% of layout width
stateManagement__enabled: false
});
});
</script>
</head>
<body>
<div class="RequiredBorder">
<div id="SplitContainer">
<div class="ui-layout-west">
LEFT
<ul>
<li>Node 1</li>
<li>Node 2
<ul>
<li>Node 2.1</li>
<li>Node 2.2
<ul>
<li>Node 2.2.1</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div class="ui-layout-center">
RIGHT
<p>
<input type="text" value="Text 1" />
</p>
<p>
<input type="text" value="Text 2" />
</p>
</div>
</div>
</div>
</body>
</html>
I want the two content divs to stretch to fill the container horizontally, but stretch to fill their content vertically.
The div widths work exactly as desired, but the heights are always zero pixels unless I hardcode the height in the CSS, e.g.
#SplitContainer {
height: 400px;
}
Hardcoding the height is not an acceptable solution. In the real website, the contents of these divs could be anything from a small fraction of the window height to several multiples of it, and the <div class="RequiredBorder"> div must enclose the whole lot and size to content.
I have read through the jQuery UI Layout documentation and searched on Google, but I haven't found anything useful so far. Things I have already tried that didn't work:
#SplitContainer {
display: inline-block;
}
This renders the container and all its contents with zero width and height.
#SplitContainer {
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
}
This renders the container and all its contents filling the entire browser window, overlaying the rest of the content.
The demo pages on the jQuery UI Layout website do not exhibit this problem because they all put the outermost layout directly inside the <body> element. When I tried that in my page, it did work correctly. However, the real website will have to enclose the layout in a nested <div>.
I am testing this page in IE 11 and Firefox 29. Both exhibit exactly the same behaviour.
Um I know this wont work but try adding this?
div{
height:4em;
width:4em;
}
<script>
very good chance this wont work-_-
How to block all UI things in a webpage until all JavaScript files including jquery.js are loaded completely. Is there any possibility to do it using only JavaScript?
You can add a css mask with z-index set to higher than all your other ui elements on the page
In your page
<body>
<div class="mask"></div>
..
..
</body>
CSS
.mask {
position: fixed;
top: 0px;
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
background: #666;
overflow: hidden;
opacity: 0.7;
z-index: 99;
}
Once your jQuery is loaded, hide this mask.
$( document ).ready(function() {
$('.mask').hide();
});
Add some kind of this snippet at the very top of you body:
<div class="loading-overlay" id="loading">
<div class="loading">Loading..</div>
</div>
and this styles inline in HEAD:
<style>.loading-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .6);
z-index: 1000;
}
.loading {
font-size: 20px;
text-align: center;
color: #FFF;
position: absolute;
top: 50%;
left: 0;
width: 100%;
}</style>
Then after all javascript files execute this code:
document.getElementById('loading').style.display = 'none';
Make sure z-index property of the overlay is high enough to cover everything on the page.
However this solution is not reliable if some of your heavy scripts are loaded asynchronously.
Example: http://jsfiddle.net/ucPLW/
Statically listing the script tags in the head will ensure they are loaded before the DOM. This has been the case for as long as I can remember.
<html>
<head>
<!-- insert your script tags here -->
</head>
<body>
<!-- your DOM here -->
</body>
</html>
Its recommended to load the scripts at the bottom of the page instead so I'm not sure your motivations for this.
If by "UI Things," you mean the DOM, then you can put your javascript either at the end of your html like so:
<html>
<head>...</head>
<body>
<script>
// This javascript will execute after the HTML has loaded
</script>
</body>
</html>
Or if you want to use JQuery then you can put your UI code in a document ready function like this:
$(document).ready(function() {
// This javascript will also execute after the HTML has loaded
});
Best of Luck.
You can use the $(window).load() event for your code since this happens after the page is fully loaded and all the code in the various $(document).ready() handlers have finished running.
$(window).load(function(){
//your code here
});