I am trying to put a background video on my SharePoint but instead of setting it as a background video it starts playing it and does not work. It works perfectly out of SharePoint (in browser) Need Help Please
Evidently there isn't something fundamentally wrong with my html since it renders in the browser. Are there any sharepoint html5 wizards out there who can help?
<!DOCTYPE html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Oryx Technologies</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">
<link rel="stylesheet" href="https://oryxtech.sharepoint.com/sites/newsite/Shared%20Documents/normalize.css">
<link rel="stylesheet" href="https://oryxtech.sharepoint.com/sites/newsite/Shared%20Documents/bootstrap.min.css">
<link rel="stylesheet" href="https://oryxtech.sharepoint.com/sites/newsite/Shared%20Documents/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://oryxtech.sharepoint.com/sites/newsite/Shared%20Documents/owl.carousel.css">
<link rel="stylesheet" href="https://oryxtech.sharepoint.com/sites/newsite/Shared%20Documents/owl.theme.css">
<link rel="stylesheet" href="https://oryxtech.sharepoint.com/sites/newsite/Shared%20Documents/animate.css">
<link rel="stylesheet" href="https://oryxtech.sharepoint.com/sites/newsite/Shared%20Documents/slicknav.min.css">
<link rel="stylesheet" href="https://oryxtech.sharepoint.com/sites/newsite/Shared%20Documents/responsive.css">
<link rel="stylesheet" href="https://oryxtech.sharepoint.com/sites/newsite/Shared%20Documents/main.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<video poster="" id="bgvid" autoplay muted loop>
<source src="https://oryxtech.sharepoint.com/sites/newsite/Shared%20Documents/Jon%20Hopkins%20-%20Immunity%20(Rowbyte%20Plexus).mp4.webm" type="video/webm">
<source src="https://oryxtech.sharepoint.com/sites/newsite/Shared%20Documents/Jon%20Hopkins%20-%20Immunity%20(Rowbyte%20Plexus).mp4" type="video/mp4">
</video>
<section class="intro" id="home">
<div class="menu-bar menu">
<div class="container">
<div class="row">
<div class="col-md-4">
<div id="logo">
<im src="images/logo.png" alt="" title="" height="40px" style="float: left;"/>
</div>
</div>
<div class="col-md-8">
<ul class="list-unstyled" id="main-menu">
<li><a class="active" href="#home">Home</a></li>
<li>Facebook</li>
<li>Twitter</li>
<li>LinkedIn</li>
<li>Website</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Menu Ends here -->
<div class="intro-content">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12 intro-image">
<img src="images/logo.png" alt="" />
</div>
<div class="col-md-8 col-sm-6 col-xs-12 intro-texts">
<h1>Welcome to Oryx Technologies Intranet Portal</h1>
<p>Explore Your Posibilities | Run With Oryx</p>
<p>Collabrative | Intelligent | Secure</p>
<ul class="list-unstyled">
<li>Human Resources</li>
<li>Finance</li>
<li>Sales </li>
<li>Technology </li>
<li>Operations </li>
<li>Marketing </li>
<li>Projects </li>
<li>Investors </li>
<li>Business Partners </li>
<li>Technology Partners</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- Intro Section Ends -->
<section class="features" id="features">
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12 wow fadeIn">
<h2>Employee Self Services</h2>
</div>
<div class="col-md-3 col-sm-6 wow fadeInLeft">
<div class="single-service">
<p style="background:#EE3867;"><i class="fa fa-pencil"></i></p>
<h3>Submit a Leave Application</h3>
<p>Click Me</p>
</div>
</div>
<div class="col-md-3 col-sm-6 wow fadeInLeft">
<div class="single-service">
<p style="background:#3DB39D;"><i class="fa fa-pencil"></i></p>
<h3>Claim an Expense</h3>
<p>Click Me</p>
</div>
</div>
<div class="col-md-3 col-sm-6 wow fadeInRight">
<div class="single-service">
<p style="background:#57C7ED;"><i class="fa fa-pencil"></i></p>
<h3>Follow a Request</h3>
<p>Click Me</p>
</div>
</div>
<div class="col-md-3 col-sm-6 wow fadeInRight">
<div class="single-service">
<p style="background:#324E5C;"><i class="fa fa-pencil"></i></p>
<h3>Submit a Petty Cash Request</h3>
<p>Click Me</p>
</div>
</div>
</div>
</div>
</section>
<!-- Features Section Ends Here -->
<section class="app-screenshot">
<div class="container" id="screenshots">
<div class="row">
<div class="col-md-12 wow fadeInUp">
<h2>Case Studies</h2>
</div>
<div id="owl-example" class="owl-carousel col-md-12 wow fadeInUp">
<div><img src="images/casesstdtg.png" alt="" /></div>
<div><img src="images/ateis.png" alt="" /></div>
<div><img src="images/wadi.png" alt="" /></div>
<div><img src="images/aggerko.png" alt="" /></div>
<div><img src="images/aggerko.png" alt="" /></div>
<div><img src="images/aggerko.png" alt="" /></div>
<div><img src="images/aggerko.png" alt="" /></div>
<div><img src="images/aggerko.png" alt="" /></div>
<div><img src="images/aggerko.png" alt="" /></div>
<div><img src="images/aggerko.png" alt="" /></div>
<div><img src="images/aggerko.png" alt="" /></div>
<div><img src="images/aggerko.png" alt="" /></div>
<div><img src="images/aggerko.png" alt="" /></div>
<div><img src="images/aggerko.png" alt="" /></div>
</div>
</div>
</div>
</section>
<!--Other Features Ends Here-->
<!-- App Screenshot Ends Here-->
<!--Testimonial Section Ends Here-->
<section class="clients-logo" id="clients">
<div class="container">
<div class="row">
<div id="clients-logo" class="owl-carousel col-md-12 wow slideInRight">
<div><img src="images/linkedin.png" alt="" /></div>
<div><img src="images/twitter.png" alt="" /></div>
<div><img src="images/facebook.png" alt="" /></div>
<div><img src="images/facebook.png" alt="" /></div>
<div><img src="images/skype.png" alt="" /></div>
<div><img src="images/google-plus.png" alt="" /></div>
</div>
</div>
</div>
</section>
<!-- Clients Logo Section Ends Here -->
<!-- Price List Section Ends Here -->
<!-- About App Section Ends Here -->
<!-- Get App Section Ends Here -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.3.min.js"><\/script>')</script>
<script src="js/bootstrap.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#owl-example").owlCarousel({
items : 4,
navigation : false,
navigationText : ["prev","next"],
paginationNumbers: true
});
$("#testimonial-carousel").owlCarousel({
items : 1,
itemsCustom : true,
itemsDesktop : [1199,1],
itemsDesktopSmall : [980,1],
itemsTablet: [768,1],
itemsTabletSmall: true,
itemsMobile : [479,1],
singleItem : true,
itemsScaleUp : true,
responsive : true
});
$("#clients-logo").owlCarousel({
items : 6,
paginationNumbers : false,
navigation : false,
});
});
</script>
<script src="js/wow.min.js"></script>
<script>
new WOW().init();
</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<script type="text/javascript">
// handle links with #href started with '#' only
$(document).on('click', 'a[href^="#"]', function(e) {
// target element id
var id = $(this).attr('href');
// target element
var $id = $(id);
if ($id.length === 0) {
return;
}
// prevent standard hash navigation (avoid blinking in IE)
e.preventDefault();
// top position relative to the document
var pos = $(id).offset().top;
// animated top scrolling
$('body, html').animate({scrollTop: pos}, 1000);
});
</script>
<script type="text/javascript">
// Create a clone of the menu, right next to original.
$('.menu').addClass('original').clone().insertAfter('.menu').addClass('cloned').css('position','fixed').css('top','0').css('margin-top','0').css('z-index','500').css('background','#000').removeClass('original').hide();
scrollIntervalID = setInterval(stickIt, 10);
function stickIt() {
var orgElementPos = $('.original').offset();
orgElementTop = orgElementPos.top;
if ($(window).scrollTop() >= (orgElementTop)) {
// scrolled past the original position; now only show the cloned, sticky element.
// Cloned element should always have same left position and width as original element.
orgElement = $('.original');
coordsOrgElement = orgElement.offset();
leftOrgElement = coordsOrgElement.left;
widthOrgElement = orgElement.css('width');
$('.cloned').css('left',leftOrgElement+'px').css('top',0).css('width',widthOrgElement).show();
$('.original').css('visibility','hidden');
} else {
// not scrolled past the menu; only show the original menu.
$('.cloned').hide();
$('.original').css('visibility','visible');
}
}
</script>
<script src="js/jquery.slicknav.min.js"></script>
<script>
$(function(){
$('#main-menu').slicknav();
});
</script>
</body>
</html>
Related
I have an issue with < a > < finger > < img > < figcaption > ...!
Whey I use only tag < a > and < img > in loop of :::
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 view-waid">
<a href="#">
<img src="https://www.chd4.com/uni-thumbs/c1abc5891b5ba4dde2431d3730a95ffea9cc3f66.jpg" width="200" height="252" />
</a>
<a href="#">
<img src="https://www.chd4.com/uni-thumbs/c1abc5891b5ba4dde2431d3730a95ffea9cc3f66.jpg" width="200" height="252" />
</a>
Its just work fine view
But when I just insert this
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 view-waid">
<a href="#">
<figure>
<img src="https://www.chd4.com/uni-thumbs/c1abc5891b5ba4dde2431d3730a95ffea9cc3f66.jpg" width="200" height="252" />
<figcaption>
<h4>MYMYMY</h4>
</figcaption>
</figure>
</a>
<a href="#">
<figure>
<img src="https://www.chd4.com/uni-thumbs/c1abc5891b5ba4dde2431d3730a95ffea9cc3f66.jpg" width="200" height="252" />
<figcaption>
<h4>MYMYMY</h4>
</figcaption>
</figure>
</a>
</div>
It just broke off into vertical. Look Here
I need this to horizontal like a image gallery.
Where is the problem???
I am not using extra CSS.
Here is my full code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title><tag:main_title /></title>
<!-- Bootstrap 4 CSS. This is for the alpha 3 release of Bootstrap 4. This should be updated when Bootstrap 4 is officially released. -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY" crossorigin="anonymous">
<!-- Custom CSS: You can use this stylesheet to override any Bootstrap styles and/or apply your own styles -->
<link href="http://192.168.0.103/style/mynew_1.0/css/custom.css" rel="stylesheet">
<!-- For icons -->
<link href="http://192.168.0.103/style/mynew_1.0/css/font-awesome-4.6.3/css/font-awesome.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --><!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Navigation -->
<nav id="topNav" class="navbar navbar-full navbar-fixed-top navbar-dark bg-inverse m-b-1">
<button class="navbar-toggler hidden-md-up pull-right" type="button" data-toggle="collapse" data-target="#navbar">
☰
</button>
<a class="navbar-brand" href="#"><tag:site_name /></a>
<div class="collapse navbar-toggleable-sm" id="navbar">
<tag:main_dropdown />
<!-- Search -->
<form class="form-inline pull-xs-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-secondary" type="submit">Search</button>
</form>
</ul>
</div>
</nav>
<header>
<div class="header-blurb">
<div class="container">
<div class="row">
<tag:main_header />
</div>
<div class="row">
<div class="col-sm-12 header-blurb-ads">
<h6>ads</h6>
</div>
</div>
<div class="row">
<div class="col-sm-12 header-blurb-ssmenu">
<h6>sub-menu</h6>
</div>
</div>
<div class="row">
<div class="col-sm-12 header-blurb-slideshow">
<h6>slide-show</h6>
</div>
</div>
</div>
</div>
</header>
<div class="container-fluid">
<div class="row">
<!-- Left Column -->
<div class="col-sm-1 view-waid">
<tag:main_left />
</div>
<!-- /Left Column -->
<!-- Center Column -->
<div class="col-sm-8 view-waid">
<!-- Articles -->
<tag:main_content />
<!-- Img test 2 -->
<!-- Img test 2 -->
</div>
<!-- /Center Column-->
<!-- Right Column -->
<div class="col-sm-3 view-waid">
<tag:main_right />
</div> <!-- /Right Column -->
</div>
</div>
<!--/container-fluid-->
<!-- Image box testing -->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 d-flex view-waid">
<a href="#">
<figure>
<img src="https://www.chd4.com/uni-thumbs/c1abc5891b5ba4dde2431d3730a95ffea9cc3f66.jpg" width="200" height="252" />
<figcaption>
<h4>MYMYMY</h4>
</figcaption>
</figure>
</a>
<a href="#">
<figure>
<img src="https://www.chd4.com/uni-thumbs/c1abc5891b5ba4dde2431d3730a95ffea9cc3f66.jpg" width="200" height="252" />
<figcaption>
<h4>MYMYMY</h4>
</figcaption>
</figure>
</a>
</div>
</div>
</div>
<!-- /Image box testing -->
<footer>
<div class="footer-blurb">
<div class="container">
<div class="row">
<div class="col-sm-3 footer-blurb-item">
<h3><i class="fa fa-text-height" aria-hidden="true"></i> ADS-1</h3>
<p>PLEASE GIVE ADS</p>
<p><a class="btn btn-primary" href="#">FOR SHOW</a></p>
</div>
<div class="col-sm-3 footer-blurb-item">
<h3><i class="fa fa-wrench" aria-hidden="true"></i> ADS-2</h3>
<p>PLEASE GIVE ADS -- 2 </p>
<p><a class="btn btn-success" href="#">FOR SHOW - 2</a></p>
</div>
<div class="col-sm-3 footer-blurb-item">
<h3><i class="fa fa-paperclip" aria-hidden="true"></i> ADS-3</h3>
<p>PLEASE GIVE ADS -- 3</p>
<p><a class="btn btn-primary" href="#">FOR SHOW - 3</a></p>
</div>
<div class="col-sm-3 footer-blurb-item">
<!-- Thumbnails -->
<h3><i class="fa fa-camera" aria-hidden="true"></i> ADS-4</h3>
<div class="row">
<div class="col-xs-6">
<a href="#" class="img-fluid">
<img src="holder.js/110x80?theme=vine" alt="">
</a>
</div>
<div class="col-xs-6">
<a href="#" class="img-fluid">
<img src="holder.js/110x80?theme=sky" alt=""></a>
</div>
<div class="col-xs-6">
<a href="#" class="img-fluid">
<img src="holder.js/110x80?theme=sky" alt="">
</a>
</div>
<div class="col-xs-6">
<a href="#" class="img-fluid">
<img src="holder.js/110x80?theme=vine" alt="">
</a>
</div>
</div>
</div>
</div>
<!-- /.row -->
<h4>MY-Test_IS NOT GOOD</h4>
</div>
</div>
<div class="small-print">
<div class="container">
<p>Terms & Conditions | Privacy Policy | Contact</p>
<p>Copyright © Example.com 2015 </p>
</div>
</div>
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>
<!-- Tether -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
<!-- Bootstrap 4 JavaScript. This is for the alpha 3 release of Bootstrap 4. This should be updated when Bootstrap 4 is officially released. -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js" integrity="sha384-ux8v3A6CPtOTqOzMKiuo3d/DomGaaClxFYdCu2HPMBEkf6x2xiDyJ7gkXU0MWwaD" crossorigin="anonymous"></script>
<!-- Initialize Bootstrap functionality -->
<script>
// Initialize tooltip component
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
// Initialize popover component
$(function () {
$('[data-toggle="popover"]').popover()
})
</script>
<!-- Placeholder Images -->
<script src="js/holder.min.js"></script>
</body>
</html>
Based on your code, just add class row or d-flex next to col-sm-12.
Based on your BS link, just add CSS like:
.row{
display:flex;
flex-wrap:wrap;
}
DEMO
.row{
display:flex;
flex-wrap:wrap;
}
<link rel="stylesheet" href="maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/…" integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 row view-waid">
<a href="#">
<figure>
<img src="https://www.chd4.com/uni-thumbs/c1abc5891b5ba4dde2431d3730a95ffea9cc3f66.jpg" width="200" height="252" />
<figcaption>
<h4>MYMYMY</h4>
</figcaption>
</figure>
</a>
<a href="#">
<figure>
<img src="https://www.chd4.com/uni-thumbs/c1abc5891b5ba4dde2431d3730a95ffea9cc3f66.jpg" width="200" height="252" />
<figcaption>
<h4>MYMYMY</h4>
</figcaption>
</figure>
</a>
</div>
</div>
</div>
We're having an issue with our page not working on Internet Explorer 11. However, it works fine on other browsers with no issues.
We don't know how to solve this and we've been researching on the internet on how to fix this issue however, cannot find anything which can help.
We were wondering if anyone could assist us with this.
<!DOCTYPE html>
<head>
<title>Canon UST Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
<!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script> -->
<!-- Add jQuery library -->
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script src="./jquery.reel.js" type="text/javascript"></script>
<script src="raphael.min.js" type="text/javascript"></script>
<script type="text/javascript" src="mainJ.js"></script>
<script src="jquery.event.move.js"></script>
<script src="jquery.twentytwenty.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
<link rel="stylesheet" href="default.css">
<link href="jquery-ui.css" rel="stylesheet">
<link rel="stylesheet" href="twentytwenty.css">
<style type="text/css">
.forMidSec{width:100%; float: left; text-align: center;}
.marked {
background: red; width: 20px;height: 20px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
}
#openDiv
{
z-index:99;
}
.AF
{
display:none;
}
.innerPages .inFP
{
display:none;
}
.commonHeader
{
visibility:hidden;
}
</style>
</head>
<body>
<!---->
<div class="imainint">
<div id = "imgwrap" class="imgwrapint">
<div id="introimg" style="width:800px;height:670px;">
</div>
</div>
</div>
<!---->
<div class="progressBar">
<div class="progressImg"></div>
</div>
<div class="mainWrap">
<header class="mainHead">
<div class="wrapper clearfix modelName">
<div class="col1">
<ul class="top">
<li id ="mainli"><img src="buynow.png" alt="Buy Now" /></li>
</ul>
</div>
<div class="col3"><img src="logo_canon.png" width="70" height="15" alt="Canon"></div>
</div>
</header>
<div class="forMidSec">
<section class="wrapper clearfix h600">
<!--<span class="dtext">HTYU</span>-->
<div id="showImages">
<div id="view360wrapper">
<!-- Image 360 Deg to show here -->
<img src="360/1-1.jpg" name="view360" id="view360"/>
</div></div>
<div id="openDiv" style="display:none">
<ul class="sub-menu">
</ul>
</div>
<div id ="omni_arrow"><img src="omni-arrow.png" alt="omni-arrow" style="text-align:center"></div>
</div>
</section>
</div>
<div class="commonHeader">
<header>
<div class="wrapper clearfix modelName">
<div class="col1">
<ul class="top">
<li><img src="back.gif" alt="Back"></li>
<li id = "buyLi"><img src="buynow.png" alt="Buy Now"></li>
<li class="compareBtn">Compare</li>
</ul>
</div>
<div class="col2">
<ul class="top">
<li></li>
<li><img class="featureImg" src="" alt=""> <img src="specifications.gif" alt="Specifications" class="featureSpecs"></li>
</ul>
</div>
<div class="col3"><img src="logo_canon.png" width="70" height="15" alt="Canon"></div>
</div>
</header>
</div>
<div class="innerPages">
<div id="openCompare" class="compare-overlay">
<div class="compare-open">
<div class="compare-arrow"></div>
<a title="Close" href="javascript:void(0)" class="compare-close"></a>
<div class="compare-inner">
<div class="compare-innerTop">
</div>
<div class="compare-innerBottom">
</div>
</div>
</div>
</div>
<div id="openFeatures" class="features-overlay">
<div class="features-open">
<div class="features-arrow"></div>
<a title="Close" href="javascript:void(0)" class="features-close"></a>
<div class="features-inner">
<p>Language Text</p>
</div>
</div>
</div>
<!-- Start of auto focus Images -->
<div class="AF inFP">
<section class="wrapper clearfix bgcol3 h600">
<div class="wrapper clearfix bgcol1">
<div class="hotspot-gallery">
<div class="big-image"></div>
<div class="hotSpotImg"></div>
</div>
</div>
</section>
</div>
<!-- End of auto focus Images -->
<!-- Start of video Page -->
<div class="videoContainer inFP">
<section class="wrapper clearfix bgcol1 h600">
<div class="progressBar">
<div class="progressImg"></div>
</div>
<div class="vid">
<video width="640" id="eosVid" height="360" controls>
<source src="" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</section>
</div>
<!-- End Of Video page -->
<!-- Start of Overlap feature -->
<div class="overlapContainer inFP">
<section class="wrapper clearfix h600">
<div class="overlapCont"></div>
</section>
</div>
<!-- End of Overlap feature -->
<!-- Start of HDR Gallery feature -->
<div class="hdrGalCont inFP">
<section class="wrapper clearfix bgcol3 h600">
<div id="openEnlargeImg" class="EnlargeImg-overlay">
<div class="EnlargeImg-open">
<a title="Close" href="javascript:void(0)" onclick="document.getElementById('openEnlargeImg').style.display='none'" class="EnlargeImg-close"></a>
<div class="EnlargeImg-inner">
<img src="EOS 70D - HDR - Normal Exposure.jpg" /> </div>
</div>
</div>
<div class="image-gallery">
<div class="enlargeIcon filterImg"><img src="fullbutton.png"></div>
<div class="big-image">
</div>
<div class="captionTxt"></div>
<div class="thumbs">
<ul>
</ul>
</div>
</div>
</section>
</div>
<!-- End of Hdr Gallery feature -->
<!-- Start of Filter Gallery feature -->
<div class="filterGal inFP">
<div id="openEnlargeImg1" class="EnlargeImg-overlay">
<div class="EnlargeImg-open">
<a title="Close" href="javascript:void(0)" onclick="document.getElementById('openEnlargeImg1').style.display='none'" class="EnlargeImg-close"></a>
<div class="EnlargeImg-inner">
<img src="EOS 70D - HDR - Normal Exposure.jpg" /> </div>
</div>
</div>
<section class="wrapper clearfix bgcol1">
<div class="imgWrapper filterGalFlow"></div>
</section>
</div>
<!-- End of Filter Gallery feature -->
<!-- Start of MultiExpo feature -->
<div class="MultiExposure inFP">
<section class="wrapper clearfix h600">
<div class="multipleExpo"><img src="" alt="Multiple Exposure" style="max-width:800px; height:auto"></div>
</section>
</div>
<!-- End of MultiExpo feature -->
<div class="frameSlier inFP">
<div class="slide-img">
<div id="cycler" class="eagleSlide">
<!--<img class="active" src="" alt="My image" />
<img src="" alt="My image" />
<img src="" alt="My image" />
<img src="" alt="My image" />
<img src="" alt="My image" />
<img src="" alt="My image" />
<img src="" alt="My image" />
<img src="" alt="My image" />
<img src="" alt="My image" />
<img src="" alt="My image" /> -->
</div>
<div class="sliderBg">
<div id="slider">
</div>
</div>
</div>
</div><!-- End of Frame Slider-->
<!-- Start of HdrSlider -->
<div class="hdrSlider inFP">
<div class="slide-img">
<div id="cycler2">
<img class="active" src="" alt="My image" />
<img src="" alt="My image" />
<img src="" alt="My image" />
</div>
<div id="slider2Up">
<div id="slider2">
</div>
</div>
</div>
</div><!-- End Of hdr Slider-->
<!-- Start of zoom slider -->
<div class="zoomSlider inFP">
<div class="slide-img">
<div id="cycler3">
</div>
<div id="slider3Up">
<div id="slider3">
</div>
</div>
</div>
</div>
<!-- End of zoom slider -->
<!-- Start of Dual Slider -->
<div class="dualSlid inFP">
<div class="slide-img dualSlideImg">
</div>
<div style="width:800px; height:auto; display:table; margin:-80px auto 0; padding:0; position:relative">
<div style="width:49%; display:table-cell">
<div id="slider5Up">
<div id="slider5"></div>
</div>
</div>
<div style="width:49%; display:table-cell">
<div id="slider4Up">
<div id="slider4">
</div>
</div>
</div>
</div>
</div>
<!-- End of dual Slider-->
</div>
<div id="clickLinks"></div>
<div id="videoPlayer"></div>
<div id="staticImageViewer"></div>
</body>
</html>
I made a directive that would scroll to a hidden drop down when "Learn more" was clicked. It seems to only scroll to the div when you click "hide" after it has already been open.
How can I make it scroll when it first drops down?
Index HTML
<!DOCTYPE html>
<html lang="en" data-ng-app="app">
<head>
<meta charset="UTF-8">
<meta name="description" content="stuff">
<meta name="keywords" content="stuff">
<meta name="author" content="stuff">
<title> Title</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.css">
<!-- Custom styles -->
<link href="css/style.css" rel="stylesheet">
<link href="css/svg_style.css" rel="stylesheet">
<!--Jquery -->
<script src="lib/jquery/dist/jquery.min.js"></script>
<!-- Angular -->
<script src="lib/angular/angular.min.js"></script>
<script src="lib/angular-route/angular-route.min.js"></script>
<script src="lib/angular-animate/angular-animate.min.js"></script>
<script src="lib/angular-cookies/angular-cookies.min.js"></script>
<!-- Bootstrap -->
<script src="lib/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
</head>
<body id="index_body">
<div data-ng-controller="HeaderCtrl">
<div class="top-header" data-ng-include="templateUrl"></div>
</div>
<div class="page [[ pageClass ]]" ng-view autoscroll="true"></div>
<!-- Main JS -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/headerCtrl.js"></script>
<script src="js/controllers/modal.js"></script>
<script src="js/controllers/ResonanceCtrl.js"></script>
<script src="js/controllers/ContactCtrl.js"></script>
<script src="js/controllers/LandingCtrl.js"></script>
<script src="js/controllers/SignInCtrl.js"></script>
<!-- Directives -->
<!-- <script src="js/directives/LandingAnimation.js"></script> -->
<script src="js/jq.js"></script>
</body>
</html>
Template HTML
<div class="col-xs-12 col-sm-12 col-md-5">
<div class="caption">
<h1 class="text-left h-color thin">
Text Header
</h1>
<p class="lead p-color">More Text</p>
<!-- Here is my Toggle Button -->
<a scroll-to-item scroll-to="#myContent" class="lead p-color learn-button togglebtn shake shake-rotate" data-ng-click="isCollapsed1 = !isCollapsed1">
<small>
<div ng-show="isCollapsed1">
<span class="glyphicon glyphicon-plus" ></span> Learn More
</div>
<div ng-hide="isCollapsed1">
<span class="glyphicon glyphicon-minus"></span> Hide
</div>
</small>
</a>
</div>
</div>
<div class="hidden-xs hidden-sm col-md-7 col-lg-offset-1 col-lg-6">
<img alt="Image" class="img-responsive center-block" src="images/kip-animation.png" />
</div>
<!--Here is the what I want to collapse -->
<div id="myContent" collapse="isCollapsed1" class="row row-offset row-pad" style="margin: 0 30px">
<div class="col-xs-6 col-sm-4 col-md-4">
<div class="lead caption text-center">
<h3 class="h-color2">Item 1</h3>
</div>
<div class="thumbnail">
<img style="height: 100px; width: auto;" class="img-circle" src="images/logo-bunny.png" alt="Logo">
</div>
<div class="lead caption">
<p class="p-color"><small>Text</small>
</p>
</div>
</div>
<div class="col-xs-6 col-sm-4 col-md-4">
<div class="lead caption text-center">
<h3 class="h-color2">Item 2</h3>
</div>
<div class="thumbnail">
<img style="height: 100px; width: auto;" class="img-circle" src="images/logo-bunny.png" alt="Logo">
</div>
<div class="lead caption">
<p class="p-color"><small>Text</small>
</p>
</div>
</div>
<div class="col-xs-6 col-sm-4 col-md-4">
<div class="lead caption text-center">
<h3 class="h-color2">Item 3</h3>
</div>
<div class="thumbnail">
<img style="height: 100px; width: auto;" class="img-circle" src="images/logo-bunny.png" alt="Logo">
</div>
<div class="lead caption">
<p class="p-color"> <small>Some Text</small>
</p>
</div>
</div>
</div>
<!-- END DROPDOWN-->
Scrolling Directive
app.directive('scrollToItem', function() {
return {
restrict: 'A',
scope: {
scrollTo: "#"
},
link: function(scope, $elm) {
$elm.on('click', function() {
$('html,body').animate({scrollTop: $(scope.scrollTo).offset().top }, 700);
});
}
};
});
App JS
var app = angular.module('app', ['ui.bootstrap', 'ngRoute', 'ngAnimate']);
app.config(function($interpolateProvider, $routeProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
$routeProvider
.when('/', {
templateUrl : 'pages/LandingPage.html',
controller : 'LandingCtrl'
})
.otherwise({ redirectTo: '/signin'});
});
Need the Portfolio and Services buttons turned around to lie horizontally and in line with the About Us and Contacts buttons.
I can provide the CSS if needed.
Preview of what the website looks now:
very confusing
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<meta charset="utf-8">
<link rel="icon" href="images/favicon.ico">
<link rel="shortcut icon" href="images/favicon.ico" />
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery.js"></script>
<script src="js/jquery-migrate-1.1.1.js"></script>
<script src="js/superfish.js"></script>
<script src="js/jquery.equalheights.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script>
</script>
<!--[if lt IE 8]>
<div style=' clear: both; text-align:center; position: relative;'>
<a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home? strong textocid=ie6_countdown_bannercode">
<img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." />
</a>
</div>
<![endif]-->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<link rel="stylesheet" media="screen" href="css/ie.css">
<![endif]-->
</head>
<body class="page1">
<!--==============================header=================================-->
<header>
<div class="container_12">
<div class="grid_12">
</div>
<div class="grid_4">
<div class="port"><div>
<a class="link_img" href="index-2.html"><img src="images/page1_img1.jpg" alt="">
<span></span></a>
About Us
</div>
</div></div>
<div class="grid_4"><h1><a href="index.html"><img src="images/logo.png" alt="Brand
Identity"></a></h1></div>
<div class="grid_4 fright">
<div class="port">
<a class="link_img " href="index-2.html"> <img src="images/page1_img2.jpg" alt="">
<span></span></a>
Contacts
</div>
</div>
<div class="clear"></div>
<div class="port1">
<div class="grid_12">
<div class="port">
<a class="link_img " href="index-2.html"><img src="images/page1_img3.jpg" alt="">
<span></span></a>
Portfolio
</div>
<div class="port">
<a class="link_img " href="index-2.html"><img src="images/page1_img4.jpg" alt="">
<span></span></a>
Services</div>
</div>
</div>
<div class="port2">
<div class="grid_12">
<div class="port">
<a class="link_img " href="index-2.html"><img src="images/page1_img5.jpg" alt="">
<span></span></a>
Work for PixelMi<sup>2</sup>
</div>
<div class="port">
<a class="link_img " href="index-2.html"><img src="images/page1_img6.jpg" alt="">
<span></span></a>
Blog</div>
</div>
</div>
</div>
<div class="ic"></div>
</header>
<footer>
<div class="container_12">
<div class="grid_12">
<div class="socials">
</div>
<div class="copy">
</div>
</div>
</div>
</footer>
</body>
</html>
I am coding a website using onepage-scroll, and I'm encountering a very strange issue. In my last section (fourth), I added some content (notify me!), it displayed perfectly, and now I did something else (added scripts) and all the content disappeared.
Demo here: https://opencubes.github.io/
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>OpenCubes</title>
<link rel="stylesheet" href="stylesheets/styles.css">
...
<script type="text/javascript" src="//cdn.firebase.com/js/client/1.0.17/firebase.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script>
$(document).ready(function () {
$(".main").onepage_scroll({
sectionContainer: "section",
...
direction: "vertical"
});
$('a.notify').on('click', function () {
...
});
});
</script>
</head>
<body>
<div class="main">
<section class="first-page">
<div class="description">
<h1>The Minecraft Mod Marketplace</h1>
<div>
OpenCubes...
</div>
</div>
<a href="#" class="scroll-down">
<i class="fa fa-chevron-circle-down"></i> Scroll Down
</a>
</section>
<section class="second-page">
<div class="description">
<h1>Browse mods</h1>
<div>
With OpenCubes,...
</div>
</div>
<img src="images/browse.png" />
<a href="#" class="scroll-down">
<i class="fa fa-chevron-circle-down"></i> Keep scrolling...
</a>
</section>
<section class="third-page">
<div class="features">
<div class="feature-spotlight sl-1">
<div>
<h2>Comment and vote</h2>
...
</div>
<img src="images/comments.png" />
</div>
<div class="feature-spotlight sl-2">
<img src="images/files.png" />
<div>
<h2>Files and version manager</h2>
In OpenCubes,...
</div>
</div>
</div>
</section>
<section class="fourth-page">
<div class="main">
<h1>OpenCubes is still in development.</h1>
<div class="send">
<h2>Enter your email here to be notified when it's ready</h2>
<input class="email" type="email"/>
Notify me!
</div>
</div>
</section>
</div>
<!--[if !IE]><script>fixScale(document);</script><![endif]-->
</body>
</html>