I want the header to stick on scroll as shown here. (http://davist11.github.io/jQuery-Stickem/)
Source site (https://github.com/davist11/jQuery-Stickem)
I have a full screen video at the top of the page playing and I want to scroll and have the header stick when it hits it. Similarly there is a small border at the top on the other pages I want the scroll to miss then stick when it reaches this point.
Here is what it currently looks like
http://jsfiddle.net/wp7ornmv/
EDIT: Scroll on the HTML window
<div id="logo">
</div>
<div id="intro">
<video autoplay loop poster="images/work/bluesky.jpg" id="bgvid">
<source src="video/Peri_CloudLoop_BlueTV.webm" type="video/webm">
<source src="video/Peri_CloudLoop_BlueTV_3.mp4" type="video/mp4">
</video>
</div>
<div id="container">
<div id="content">
<div id="Mbackground">
<div id="Ncontainer">
<div id="Ncontain">
<div id="Nlogo">Logo
</div>
<div id="Nmenu">
<div class="Nlink">Contact
</div>
<div class="Nlink">About
</div>
<div class="Nlink">Work
</div>
</div>
</div>
</div>
</div>
<div id="Mbackground">
<div id="Mbody">
<div class="Mrow">
<div class="Mcontainer">
<a href="project.html" class="transition">
<span class="link-spanner"></span>
</a>
<div id="Mimageone" class="Mimage">
</div>
<div id="Mborderone" class="Mborder">
</div>
<div id="Mboxone" class="Mbox">
<div class="Mtext">
<div class="Mtitle">Title
</div>
<div class="Msubtitle">Subtitle
</div>
<div class="Mdescrip">Descript
</div>
</div>
<div class="Meye">
</div>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<div id="footerhalf1">
</div>
<div id="footerhalf2">
<div id="footercontents">Made by
</div>
</div>
</div>
This is a javascript supported behavior by stickem. You may find it HERE
Just make sure your container has a position relative and your sidebar has a position:fixed; top:0; left:auto and you will have it done.
This technique is quite common on websites running advertisements on a side panel. There is a lot more intricate information about this online and I assure you, using the source for the demo you provided along with the stickem jquery library, you will be done in no time.
Good luck
Related
This is my first question - and it is really just more of a frustration. I've went through about 12 different stack overflow questions that are similar and have copied their code and I still can't get the bloody background color to change on click. So I assume I'm missing something.
https://codepen.io/Dawsraki/pen/XRGBLW
<html ng-app="app">
<head>
<script src="http://code.angularjs.org/1.2.6/angular.min.js"></script>
</head>
<body ng-controller="SwitchController" ng-style="myStyle">
<div ng-switch="slider.page" class="screen" >
<div id="record_player" ng-switch-when="1">
<span><</span>
<div class="rectangle">
<div class="circle1">
<div class="circle3">
</div>
</div>
<div class="handle">
<div class="circle1">
</div>
<div class="hand">
</div>
<div class="arm">
</div>
</div>
<div class="toggles">
<div class="left_dash"></div>
<div class="right_dash"></div>
</div>
</div>
<h1>Listen to Music</h1>
<span>></span>
</div>
<div id="cassette" ng-switch-when="2">
<span><</span>
<div class="rectangle">
<div class="circle1">
</div>
<div class="line1">
</div>
<div class="line2">
</div>
<div class="line3">
</div>
<div class="line4">
</div>
<div class="circle2">
</div>
</div>
<h1>Share it with friends</h1>
<span>></span>
</div>
</div>
</div>
</body>
</html>
Here is my code pen - I want the background color to change when I click on the arrow and I have seen so many simple solutions but they just arn't working and I've no idea why. If anyone wants to help an AngularJS noob out there will be much love and biscuits <3 (DISCLAIMER: biscuits will not be provided)
This problem is due to ng-switch, as it creates its own scope.
Use $parent.myStyle={background:'red'}" in your anchor tag to fix this
Okay so my website has a video in the background of the actual content, example can be seen at my site here:
http://www.thespire.net/
How would I go around placing an image OVER the video while the video is still playing? I've tried incorporating it in JavaScript and within some of the tags but it always messes up the formatting of my webpage.
HTML:
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<head>
<link rel="stylesheet" type="text/css" href="homepage.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<link href='https://fonts.googleapis.com/css?family=Poppins:400,600' rel='stylesheet' type='text/css'>
<title>The Spire Network | Home</title>
</head>
<body>
<div class="header_wrapper">
<div class="header">
<ul>
<li>HOME</li>
<li>STORE</li>
<li>FORUMS</li>
</ul>
</div>
<div class="logo">
<a href="http://www.thespire.net/forums">
<img src="spirelogo.png" alt="LOGO" height="120px" width="120px" style="margin-left: 50px; margin-top: -25px; text-decoration: none; color: white;">
</a>
</div>
</div>
<div id="subheader" class="section bot light">
<div class="info">
</div>
<video poster="background.jpg" autoplay loop class="bgimage">
<source src="opvp.webm" type='video/webm; codecs="vp8, vorbis"' />
</video>
</div>
<div class="container">
<div class="section both light">
<div class="content_wrapper">
<div class="section group">
<div class="col span_4_of_4">
<h1>Welcome to The Spire Network!</h1>
<p>The Spire Network is one of the most ambitious servers in all of Minecraft. We have a wide range of plugins and features that will keep you greatly entertained! We also offer a wide-range of donation perks which are available on our donation page which you can purchase to support the server and get yourself some awesome rewards for showing your appreciation and supporting us in this great endeavor!<br>Why not check out The Spire Network by placing IP address found below into your Minecraft Client!</p>
<input type="text" value="mc.thespire.net" class="address_input" readonly></input>
</div>
</div>
</div>
</div>
<div class="section both dark">
<div class="content_wrapper">
<div class="section group">
<div class="col span_2_of_4 left">
<h1>Get the most of the server with ranks!</h1>
<p>Ranks in The Spire Network are the things that define you from other players, they show that you individually have stepped up and supported the server by donating! If you are interested in supporting the server, click the "Donate Now" button to get started!</p>
Donate now
</div>
<div class="col span_2_of_4">
</div>
</div>
</div>
</div>
<div class="section both light">
<div class="content_wrapper">
<div class="section group">
<div class="col span_2_of_4">
</div>
<div class="col span_2_of_4 left">
<h1>Looking for support?</h1>
<p>Didn't recieve your donation? Did you get banned without any reason or for something you didn't do? Did someone harass you or bully you and wasn't punished for it? Visit our TeamSpeak or click the button below to contact a member of staff about the problem you have and we will be more than happy to help.</p>
Get help
</div>
</div>
</div>
</div>
<div class="section both dark">
<div class="content_wrapper">
<div class="section group">
<div class="col span_4_of_4 center">
<h1>Got a great idea for our server?</h1>
<p>Ideas are great for the server! New ideas open up many different paths for the server and give you, the player, a new objective to aim for! Suggestions can be anything from new plugin suggestions to ways our website could be improved! Click the button below to send a recommendation for the server!</p>
Submit your idea
</div>
</div>
</div>
</div>
</div>
</body>
</html>
i can see that you have a div called info :
<div class="info"> </div>
if you add this css:
.info {
background: rgba(0, 0, 0, 0) url("http://www.thespire.net/spirelogo.png") no-repeat scroll 0 0;
}
If you want to fully cover the slider then you need more customization.
Thanks for trying to help! I'm having an issue with the following code when the page initially loads. The div class 'highlights', which contains the divs 'box' and 'box-2', jumps around the page when loading. I suspect is has something to do with the social media buttons running javascript above the divs but cannot figure out how to get everything to stay still. Here is a link to the site. Thank you all for helping!!
<div class="buttons">
<div class="fb-share-button" data-href="http://www.powerrankingsguru.com/MLB/2015-MLB- power-rankings/week-18.html" data-layout="button_count">
</div>
<div class="twitter-button">Tweet
<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="g-plus" data-action="share" data-annotation="bubble" data- href="http://www.powerrankingsguru.com/MLB/2015-MLB-power-rankings/week-18.html"> </div>
</div>
<div class="highlights">
<div class="box">
<div class="box-header"><p>What to Watch</p></div>
<div class="box-content">
<div class="game-details">
</div>
<div class="game-overview">
<div class="away-team">
<div class="away-team-logo">
<img src="../../Images/MLB/Los_Angeles_Dodgers_75px.gif">
</div>
<div class="record">
<h6>Dodgers</h6>
<h6 class="lighter">(60-45)</h6>
</div>
</div>
<div class="home-team">
<div class="home-team-logo">
<img src="../../Images/MLB/Pittsburgh_Pirates_75px.gif">
</div>
<div class="record">
<h6>Pirates</h6>
<h6 class="lighter">(61-43)</h6>
</div>
</div>
<div class="symbol">#</div>
</div>
</div>
<div class="date">
<h4><span class="left">Fri Aug 7th - Sun Aug 9th</span></h4>
</div>
</div>
<div class="box2">
<div class="box2-header"><p>Biggest Movers</p></div>
<div class="rise">
<div class="rise-up"><img src=../../Images/arrowGW.gif></div>
<div class="rise-number"><p>5</p></div>
<div class="rise-team"><img src="../../Images/MLB/Toronto_Blue_Jays_75px.gif"></div>
</div>
<div class="fall">
<div class="fall-down"><img src=../../Images/arrowRW.gif></div>
<div class="fall-number"><p>5</p></div>
<div class="fall-team"><img src="../../Images/MLB/Atlanta_Braves_75px.gif"></div>
</div>
</div>
</div>
If you're okay with using javascript you could hide your container box with display: hidden and then in a javascript onload function you would set the display back to block.
Div:
<div id="highlightDiv" class="highlights" style="display: hidden">
...
</div>
onload:
window.onload = function() {
document.getElementById("highlightDiv").style.display = "block";
}
I referred to a few questions related to iframe not working in safari. those answers suggest to use an alternative of iframe(Ajax or jQuery as an alternative to iframe). But i have already developed the website without testing in safari. I don't want to change the implementation at the last development stage.
Issue:
I am trying to integrate google maps iframe into my webpage.
The website changes responsively based on window size. The divs were
initially coded in adobe reflow. Using Edge Animate i have inserted
the html files into these divs.
The problem lies in the fact that when I try to resize google maps
page, the div on the mobile site still shows on the desktop one and
vice versa. This occurs only on Safari browser.
Heres the code i used in edge Animate.
var container = sym.$('mapBox');
var map = '<iframe
src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2595.2028231859395!2d7.7518645!3d49.4239794!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47966d5189fba81f%3A0x8ab04632090ea019!2sTU+Kaiserslautern!5e0!3m2!1sen!2sde!4v1432133191497"
width="'+container.width()+'" height="'+container.height()+'"
frameborder="0" style="border:0"></iframe>';
container.html(map);
and heres the html page.
</head>
<body>
<div id="primaryContainer" class="primaryContainer clearfix">
<div id="Video" class="clearfix">
<div id=“mapdiv_Stage" class=“EDGE-MAPDIV">
<div id="Logo" class="clearfix">
<div id="logo_Stage" class="EDGE-LOGO">
</div>
</div>
<div id="N" class="clearfix">
<div id="n_Stage" class="EDGE-N">
</div>
</div>
<div id="E" class="clearfix">
<div id="e_Stage" class="EDGE-E">
</div>
</div>
<div id="T" class="clearfix">
<div id="t_Stage" class="EDGE-T">
</div>
</div>
<div id="R" class="clearfix">
<div id="r_Stage" class=“EDGE-R">
</div>
</div>
<div id="M" class="clearfix">
<div id="m_Stage" class="EDGE-M">
</div>
</div>
<div id="S" class="clearfix">
<div id="s_Stage" class="EDGE-S">
</div>
</div>
<div id="M" class="clearfix">
<div id="m_Stage" class="EDGE-M">
</div>
</div>
<div id="I" class="clearfix">
<div id="i_Stage" class="EDGE-I">
</div>
</div>
</div>
<div id="bigsocial" class="clearfix">
<div id="youtube" class="clearfix">
<div id="youtube_Stage" class="EDGE-YOUTUBE">
</div>
</div>
<div id="instagram" class="clearfix">
<div id="instagram_Stage" class="EDGE-INSTAGRAM">
</div>
</div>
<div id="googleplus" class="clearfix">
<div id="googleplus_Stage" class="EDGE-GOOGLE">
</div>
</div>
<div id="wiki" class="clearfix">
<div id="wiki_Stage" class="EDGE-WIKI">
</div>
</div>
<div id="twitter" class="clearfix">
<div id="twitter_Stage" class="EDGE-TWITTER">
</div>
</div>
<div id="facebook" class="clearfix">
<div id="facebook_Stage" class="EDGE-FACEBOOK">
</div>
</div>
</div>
</div>
<div id="Tablet" class="clearfix">
<div id="tab_Stage" class="EDGE-Tab">
</div></div>
<div id="smallsocial" class="clearfix">
<div id="Facebook1" class="clearfix">
<div id="facebook3_Stage" class="EDGE-FACEBOOK3">
</div>
</div>
<div id="Twitter2" class="clearfix">
<div id="twitter3_Stage" class="EDGE-TWITTER3">
</div>
</div>
<div id="Wiki3" class="clearfix">
<div id="wiki3_Stage" class="EDGE-WIKI3">
</div>
</div>
<div id="Youtube4" class="clearfix">
<div id="youtube3_Stage" class="EDGE-YOUTUBE3">
</div>
</div>
<div id="Instagram5" class="clearfix">
<div id="instagram3_Stage" class="EDGE-INSTAGRAM3">
</div>
</div>
<div id="googlelus6" class="clearfix">
<div id="google3_Stage" class="EDGE-GOOGLE3">
</div>
</div></div>
</div>
</body>
</html>
“mapdiv_Stage” is the html with edge animate created map html.
How do I rectify this problem?
screen shot of chrome. This pic shows the code perfectly working in chrome (the map is not shown below a certain size)
screen shot of safari. The map should be hidden if the size reduces below a certain limit. This is not working in safari.
Both the screen shots are taken at the same browser screen size and the functionality is working in chrome and not working in safari.
I'm writing a parallax website with waypoints.js and skrollr.js
and ran into a problem:
slide1 should scroll normal (vertical) and slide-2 should scroll horizontal once it's triggered (width: 4000px). But I have no idea how to do that. I know the new waypoints.js has horizontal:true but I'm kinda stuck right now. Has anyone an idea?
<section id="slide-1">
<div data-anchor-target="#slide-1">
<div class="Container">
<div class="Content">
<h2>Scroll this vertically</h2>
</div>
</div>
</div>
</section>
<section id="slide-2">
<div data-anchor-target="#slide-2">
<div class="Container">
<div class="Content">
<h2>Scroll this horizontal</h2>
</div>
</div>
</div>
</section>
<section id="slide-3">
<div data-anchor-target="#slide-3">
<div class="Container">
<div class="Content">
<h2>Scroll this vertically again</h2>
</div>
</div>
</div>
</section>
Maybe something like:
$('#slide-2').waypoint(function() {
//toogle #slide-2 width:4000px scroll horizontal:true etc.
;});