I am working on a site where when you click on the specific navigation at the top, the slice below changes the information inside of it. The information inside of this slice is a featured video and a side slider to switch out that featured video, and a horixontal slider below it showcasing product.
Can someone please take a look at my code and tell me whats wrong with it. Ive been trouble shooting for about 2 weeks now and cant seem to find a solution :/
Thanks so much
HTML:
<link rel='stylesheet prefetch' href='http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css'>
<link rel="stylesheet" href="core_landing_styles.css">
<link rel="stylesheet" type="text/css" href="product_detail_new-core.css">
<link rel="stylesheet" type="text/css" href="video_new-core.css">
<!-- bxSlider Javascript file -->
<script src="libs/jquery.bxslider.js"></script>
<!-- bxSlider CSS file -->
<link href="libs/jquery.bxslider.css" rel="stylesheet" />
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />
<script src="jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<!-- FONTS INCLUSION -->
<link type="text/css" rel="stylesheet" href="http://fast.fonts.net/cssapi/d268d308-355f-4fc1-b527-5f948fa77c14.css"/>
<div class="page-container">
<!-- + HEADER -->
<div class="top-message-container">
<div class="inner-container">
<div class="topHeroImage">
<img src="http://assets.daddario.com/core_landing_tst/images/core_head_logo.png" alt="Welcome to Core">
<div class="header_intro_text">Get started by choosing your instrument below</b>.
</div>
</div>
</div>
</div>
<!-- - END HEADER -->
<!-- + NAVIGATION ... -->
<div class="navigation-container">
<div class="inner-container">
<img class="guit-icon" src="http://assets.daddario.com/core_landing_tst/images/guitar_bass-icon.png"> <img class="drum-icon" src="http://assets.daddario.com/core_landing_tst/images/percussion-icon.png"> <img class="violin-icon" src="http://assets.daddario.com/core_landing_tst/images/orchestral-icon.png"> <img class="sax-icon" src="http://assets.daddario.com/core_landing_tst/images/woodwinds-icon.png">
</div>
<div class="main-video-container">
<!-- + VIDEO PLAYER AND RELATED VIDEOS -->
<div class="video-player-wrapper" id="1">
<div class="video-information">
<div class="video-title">Learn everything you need to know about restringing, humidifying, and even tuning. So<br/>whether behind the scenes or between sets, you can keep your guitar in tip-top shape.</div>
</div>
<div class="youtube-video-player">
<iframe width="736" height="414" src="https://www.youtube.com/embed/EUpEqimZyMM" frameborder="0" allowfullscreen></iframe>
</div>
<div class="side-panel-related-videos">
<img src="images/related_videos_up_arrow.png" alt=""><br />
<ul class="side-panel-list">
<div>
<li>
<div class="side-panel-video-box">
<a href="">
<div class="side-panel-related-video"><img src="http://img.youtube.com/vi/08nwBtS31VU/0.jpg"></div>
<!--<h3>How a Set of Guitar Strings Changed Rock 'n' Roll: The D'Addario Wa...</h3>-->
</a>
</div>
</li>
<li>
<div class="side-panel-video-box">
<a href="">
<div class="side-panel-related-video"><img src="http://img.youtube.com/vi/qzYtGPwK2Ls/0.jpg"></div>
<!--<h3>How to Restring Guitars With a String-Through Body</h3>-->
</a>
</div>
</li>
<li>
<div class="side-panel-video-box">
<a href="">
<div class="side-panel-related-video"><img src="http://img.youtube.com/vi/9Uzy2RtBZeg/0.jpg"></div>
<!--<h3>Guitar Power 2015 ep 2. featuring Nita Strauss</h3>-->
</a>
</div>
</li>
<li>
<div class="side-panel-video-box">
<a href="">
<div class="side-panel-related-video"><img src="http://img.youtube.com/vi/W4P2KOjmvwQ/0.jpg"></div>
<!--<h3>Guitar Power 2015 ep 2. featuring Nita Strauss</h3>-->
</a>
</div>
</li>
</div>
</ul>
<img src="images/related_videos_down_arrow.png" alt="">
</div>
<!-- + PRODUCTS SEEN IN THIS VIDEO -->
<!--<div class="tab-related-products">-->
<h1><b>LIKE WHAT YOU SAW?</b> Purchase the products seen in the videos.</h1>
<ul class="related-products-wrapper bxslider">
<div class="related-products-list">
<li>
<div class="related-products-box">
<a href="">
<img src="http://daddario.com/resources/jdcdad/images/products/da_prod_nyxl1046_main_2.jpg">
<h3>NYXL1046BT</h3>
<h4>Nickel Wound, Balanced Tension, 10-46</h4>
</a>
</div>
</li>
<li>
<div class="related-products-box">
<a href="">
<img src="http://daddario.com/resources/jdcdad/images/products/da_prod_nyxl1046_main_2.jpg">
<h3>NYXL1046BT</h3>
<h4>Nickel Wound, Balanced Tension, 10-46</h4>
</a>
</div>
</li>
<li>
<div class="related-products-box">
<a href="">
<img src="http://daddario.com/resources/jdcdad/images/products/da_prod_nyxl1046_main_2.jpg">
<h3>NYXL1046BT</h3>
<h4>Nickel Wound, Balanced Tension, 10-46</h4>
</a>
</div>
</li>
<li>
<div class="related-products-box">
<a href="">
<img src="http://daddario.com/resources/jdcdad/images/products/da_prod_nyxl1046_main_2.jpg">
<h3>NYXL1046BT</h3>
<h4>Nickel Wound, Balanced Tension, 10-46</h4>
</a>
</div>
</li>
</div>
<div class="related-products-list">
<li>
<div class="related-products-box">
<a href="">
<img src="http://daddario.com/resources/jdcdad/images/products/da_prod_nyxl1046_main_2.jpg">
<h3>NYXL1046BT</h3>
<h4>Nickel Wound, Balanced Tension, 10-46</h4>
</a>
</div>
</li>
<li>
<div class="related-products-box">
<a href="">
<img src="http://daddario.com/resources/jdcdad/images/products/da_prod_nyxl1046_main_2.jpg">
<h3>NYXL1046BT</h3>
<h4>Nickel Wound, Balanced Tension, 10-46</h4>
</a>
</div>
</li>
<li>
<div class="related-products-box">
<a href="">
<img src="http://daddario.com/resources/jdcdad/images/products/da_prod_nyxl1046_main_2.jpg">
<h3>NYXL1046BT</h3>
<h4>Nickel Wound, Balanced Tension, 10-46</h4>
</a>
</div>
</li>
<li>
<div class="related-products-box">
<a href="">
<img src="http://daddario.com/resources/jdcdad/images/products/da_prod_nyxl1046_main_2.jpg">
<h3>NYXL1046BT</h3>
<h4>Nickel Wound, Balanced Tension, 10-46</h4>
</a>
</div>
</li>
</div>
</ul>
<!--</div>-->
</div>
<!-- - VIDEO PLAYER AND RELATED VIDEOS -->
</div>
</div>
<!-- - END NAVIGATION ... -->
<!-- + PLAYERS CIRCLE -->
<div class="push-notifications-container">
<div class="inner-container">
<img class="pc_border_right" src="http://assets.daddario.com/core_landing_tst/images/players_circle_logo.png">
<div class="pc_text">Players Circle is the rewards program that gives musicians more ways to earn free gear, watch exclusive content, and win great prizes. Sign up and start earning points today!</div>
<div class="play_more_text">Play More. Do More. Earn More.</div>
</div>
</div>
<!-- - END PLAYERS CIRCLE -->
<!-- + FOOTER -->
<div class="get-humidipak-container">
<div class="inner-container">
<img src="http://assets.daddario.com/core_landing_tst/images/d_brand_logo.png">
<img src="http://assets.daddario.com/core_landing_tst/images/ww_brand_logo.png">
<img src="http://assets.daddario.com/core_landing_tst/images/orch_brand_logo.png">
<img src="http://assets.daddario.com/core_landing_tst/images/pm_brand_logo.png">
<img src="http://assets.daddario.com/core_landing_tst/images/ps_brand_logo.png">
<img src="http://assets.daddario.com/core_landing_tst/images/ev_brand_logo.png"><br><br>
<div class="copyright_text">Copyright 2016 © D'Addario & Company Inc.</div>
</div>
</div>
<!-- - END FOOTER -->
</div>
<script type="text/javascript" src="core_landing.js"></script>
Here is my code pen
http://codepen.io/anon/pen/EgZAGG
Related
So I have 22 different lists with 50-100 items inside. And they take ~25k lines of html code. How to make them take less lines?
For example:
I want this to have only one item in list that repeats many times but with different ids, ids in classicImage/shortyImage(' ') and different images if this is possible
<a onclick="showClassic()">
<div class="classic">
<img src="images/classic/classic_default.png" class="imgcol2" id="classicimg" style="max-height: 75px; max-width: 150px;" >
<div class="wname" style="width: 150px;">CLASSIC</div>
</div>
</a>
<a onclick="showShorty()">
<div class="shorty">
<img src="images/shorty/shorty_default.png" class="imgcol2" id="shortyimg">
<div class="wname" style="width: 150px;">SHORTY</div>
</div>
</a>
<div class="results">
<ul id="classicList">
<li class="collection-item">
<!-- sets source of image with id="classicimg" to source of image with id classic-avalanche -->
<a onclick="classicImage('classic-avalanche'); setClassicPrice(1275)">
<div class="result-container">
<div class="result">
<img src="images/classic/classic_avalanche.png" class="windowimage" id="classic-avalanche">
</div>
<p class="skinname">Classic Avalanche</p>
</div>
</a>
</li>
<li class="collection-item">
<!-- sets source of image with id="classicimg" to source of image with id classic-default -->
<a onclick="classicImage('classic-default'); setClassicPrice(0)">
<div class="result-container">
<div class="result">
<img src="images/classic/classic_default.png" class="windowimage" id="classic-default">
</div>
<p class="skinname">Classic Default</p>
</div>
</a>
</li>
</ul>
</div>
<div class="results">
<ul id="shortyList">
<li class="collection-item">
<!-- sets source of image with id="shortyimg" to source of image with id shorty-aerosol -->
<a onclick="shortyImage('shorty-aerosol'); setShortyPrice(0)">
<div class="result-container">
<div class="result">
<img src="images/shorty/shorty_aerosol.png" class="windowimage" id="shorty-aerosol">
</div>
<p class="skinname">Shorty Aerosol</p>
</div>
</a>
</li>
<li class="collection-item">
<!-- sets source of image with id="shortyimg" to source of image with id shorty-default -->
<a onclick="shortyImage('shorty-default'); setShortyPrice(0)">
<div class="result-container">
<div class="result">
<img src="images/shorty/shorty_default.png" class="windowimage" id="shorty-default">
</div>
<p class="skinname">Shorty Default</p>
</div>
</a>
</li>
</ul>
</div>
Considering you tagged javascript and html only, i assume you have no backend code to handle the templating.
So my best advice would be to divide those multiple lists into multiple .html file and load them with JS, like this example with jQuery :
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#firstList").load("firstList.html");
});
</script>
</head>
<body>
<div id="firstList"></div>
</body>
</html>
I am trying to get the feature block to show up on the page when I click the open button, but it is not doing anything. I have a sneaking suspension this has to do with the CDNs I'm importing and their position. Or this could have something to do with the order of the relevant tap target sections in my code, I'm not really sure. I followed the Materialize example of how to set this up verbatim, yet it seems like I can't quite get it right.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Mitchell Data Science</title>
<!-- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="../static/css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection" />
<link href="../static/css/style.css" type="text/css" rel="stylesheet" media="screen,projection" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://d3js.org/d3.v2.min.js" charset="utf-8"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="static/css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection" />
<link href="static/css/style.css" type="text/css" rel="stylesheet" media="screen,projection" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://d3js.org/d3.v2.min.js" charset="utf-8"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="static/js/materialize.js"></script>
<script src="static/js/init.js"></script>
</head>
<body>
<nav class="black" role="navigation">
<div class="nav-wrapper container-fluid">
<a id="logo-container" href="index.html" class="brand-logo" style="padding-left: 30px;">Mitchell Data Science</a>
<ul class="right hide-on-med-and-down" style="padding-right: 30px">
<li>HOME</li>
<li>PORTFOLIO</li>
</ul>
<ul id="nav-mobile" class="sidenav">
<li>HOME</li>
<li>PORTFOLIO</li>
</ul>
<i class="material-icons">menu</i>
</div>
</nav>
<div id="index-banner" class="parallax-container" style="height: 350px">
<div class="section no-pad-bot">
<div class="container">
<h1 class="header center teal-text text-darken-2" style = "font-weight: 600;">Mitchell Data Science</h1>
<div class="row center">
<h5 class="header col s12 dark" >Explore, Discover, Understand…</h5>
</div>
</div>
</div>
<div class="parallax"><img src="static/media/ds_background_1.1.jpg" alt="Unsplashed background img 1"></div>
</div>
<div class="container">
<div class="section">
<!-- Icon Section -->
<div class="col lg9 m9 s12">
<div class="container">
<br>
<h1> Heroes of Pymoli Data Munging</h1>
<hr><br>
</div>
<div class="row">
<div class="col-3">
<div id="list-example" class="list-group" data-offset="0">
<a class="list-group-item list-group-item-action" href="#list-item-1">Abstract </a>
<a class="list-group-item list-group-item-action" href="#list-item-2">Wrangled Data </a>
<a class="list-group-item list-group-item-action" href="#list-item-3">Summary</a>
</div>
</div>
<!-- Element Showed -->
<div class="fixed-action-btn">
<a id="menu" class="waves-effect waves-light btn-large btn-floating" ><i class="material-icons">menu</i></a>
</div>
<!-- Tap Target Structure -->
<div class="tap-target" data-target="menu">
<div class="tap-target-content">
<h5>Title</h5>
<p>A bunch of text</p>
</div>
</div>
<a class="btn" id="open">open</a>
<a class="btn" id="close">Close</a>
<script>
$('#open').click(function(){
$('.tap-target').tapTarget('open');
});
</script>
<div class="col-9">
<div data-spy="scroll" data-target="#list-example" data-offset="0"
class="scrollspy-example change-color-black">
<h4 id="list-item-1">Abstract</h4>
<p>
<br><br><br><br>
<img src="static/media/heros_fantasy.jpg"
alt="Heroes of Pymoli Abstract Picture">
<p>
In this project, I have explored a game called Heroes Of Pymoli. I will be doing some data
wrangling to clean and organize my dataset, and strategically group the data to derive
educated observations and assumptions.</p>
<br><br><br><br>
</p>
<h4 id="list-item-2">Wrangled Data</h4>
<p>
<br><br><br>
<img src="https://raw.githubusercontent.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-/master/TP_hero.PNG"
alt="Total Players">
<br><br>
<hr>
<img src="https://raw.githubusercontent.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-/master/purchasing_analy_hero.PNG"
alt="Purchasing Analysis">
<br><br>
<hr>
<img src="https://raw.githubusercontent.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-/master/gender_count_analy_hero.PNG"
alt="Gender Analysis">
<br><br>
<hr>
<img src="https://raw.githubusercontent.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-/master/gender_purchasing_analy_hero.PNG"
alt="Purchasing Analysis by Gender">
<br><br>
<hr>
<img src="https://raw.githubusercontent.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-/master/age_analy_hero.PNG"
alt="Age Analysis">
<br><br>
<hr>
<img src="https://raw.githubusercontent.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-/master/most_pop_items.PNG"
alt="Most Popular Items">
<br><br>
<hr>
<img src="https://raw.githubusercontent.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-/master/most_profitable_items.PNG"
alt="Most Profitable Items">
<br><br>
<hr>
<img src="https://raw.githubusercontent.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-/master/top_spenders.PNG"
alt="Top Spenders">
<br><br><br><br><br>
</p>
<h4 id="list-item-3">Summary</h4>
<p>
<br><br><br><br>
- The 20 – 24 yo age group is the biggest age demographic for the game accounting for 44.79% of
the overall players. The two lowest volumes of players by age are the under 10 yo group at 2.95%
and the 40+ group at 2.08%.
<br><br>
- The overall total revenue from the game is $2,379.77.
<br><br>
- From the business standpoint, the 35-39 yo age group would be a goo place to focus the
marketing efforts. Even though their total purchase value is relatively small ($147.67) in
comparison to some other demographics, they spend the most on average per purchase ($3.60).
<br><br>
- Item number 178, the Oathbreaker, Last Hope of the Breaking Storm is both the most popular
item at 12 overall purchases, and the most profitable item at a total purchase value of $50.76.
<br><br>
- The player with the Screen Name Lisosia93 is the most prolific buyer with 5 purchases. This
player has spent a total of $18.96 with an average purchase amount of $3.79.
<br><br>
- Of the all the active players, the vast majority are male (84.03%). There also exists, a
smaller, but notable proportion of female players (14.06%).
<br><br><br><br><br>
</p>
</div>
</div>
</div>
</div>
<div class="container">
<h3>Project Links</h3>
<ul>
<li><a href="https://github.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-"
target="_blank">Heroes Of Pymoli Data Munging</a>
</li>
<li><a href="https://github.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-/blob/master/Heroes_Of_Pymoli_Data_Analysis_FINAL.ipynb"
target="_blank">Heroes Of Pymoli Kernel (Code)</a></li>
<li>Data</li>
</ul>
<br><br>
</div>
</div>
</div>
</div>
</div>
<div class="parallax-container valign-wrapper">
<div class="section no-pad-bot">
<div class="container">
<div class="row center">
<h5 class="header col s12 light" style = "font-weight: bold">A cutting edge approch to data exploration and vizualization.</h5>
</div>
</div>
</div>
<div class="parallax"><img src="static/media/ds_background_2.jpg" alt="Unsplashed background img 3"></div>
</div>
<footer class="page-footer black">
<div class="row">
<h4>
<a id="logo-container" class="brand-logo" style="padding-left: 25px;">MDS</a>
</h4>
</div>
<div class="footer-copyright" style="padding-left: 25px">
<div class="container-fluid">
Made by <a class="brown-text text-lighten-3"> Howard G. Mitchell III</a>
</div>
</div>
</footer>
<!-- <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> -->
<!--
<script> document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.tap-target');
var instances = M.TapTarget.init(elems, tapTarget('open'));
});</script> -->
</body>
</html>
Be sure to initialise the Feature Discovery:
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.tap-target');
var instances = M.TapTarget.init(elems);
});
// Or with jQuery
$(document).ready(function(){
$('.tap-target').tapTarget();
});
https://materializecss.com/feature-discovery.html#initialization
Hey I am trying to add a class and an attribute to my nav elements and for some reason my code jumps to the else statement. Appreciate any help what so ever.
This is my Html
<!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>Portfolio</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Poppins:400,300,500,600,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css">
<!-- Content Filter -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/styleC.css"> <!-- Resource style -->
<script src="js/modernizr.js"></script> <!-- Modernizr -->
<!-- HTML5 shim and Respond.js for 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/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="pageone">
<header>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img id="logo" src="images/Logo.png" alt="logo"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">HOME <span class="sr-only">(current)</span></li>
<li>WORK</li>
<li>ABOUT ME</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>CONTACT</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header>
<div class="container">
<div class="jumbotron">
<h1>Hy, I’m Robert and I am a webdesigner based in Aarhus.</h1>
</div>
</div>
</div>
<div id="2" class="pagetwo">
<div class="container-fluid">
<main class="cd-main-content">
<div class="cd-tab-filter-wrapper">
<div class="cd-tab-filter">
<ul class="cd-filters">
<li class="placeholder">
<a data-type="all" href="#0">All</a> <!-- selected option on mobile -->
</li>
<li class="filter"><a class="selected" href="#0" data-type="all">All</a></li>
<li class="filter" data-filter=".color-1">Constructing Architecture</li>
<li class="filter" data-filter=".color-2">Photography</li>
<li class="filter" data-filter=".color-2">Multimedia Design</li>
</ul> <!-- cd-filters -->
</div> <!-- cd-tab-filter -->
</div> <!-- cd-tab-filter-wrapper -->
<section class="cd-gallery">
<ul>
<li class="mix color-1 check1 radio2 option3"><img src="img/img-1.jpg" alt="Image 1"></li>
<li class="mix color-2 check2 radio2 option2"><img src="img/img-2.jpg" alt="Image 2"></li>
<li class="mix color-1 check3 radio3 option1"><img src="img/img-3.jpg" alt="Image 3"></li>
<li class="mix color-1 check3 radio2 option4"><img src="img/img-4.jpg" alt="Image 4"></li>
<li class="mix color-1 check1 radio3 option2"><img src="img/img-5.jpg" alt="Image 5"></li>
<li class="mix color-2 check2 radio3 option3"><img src="img/img-6.jpg" alt="Image 6"></li>
<li class="mix color-2 check2 radio2 option1"><img src="img/img-7.jpg" alt="Image 7"></li>
<li class="mix color-1 check1 radio3 option4"><img src="img/img-8.jpg" alt="Image 8"></li>
<li class="mix color-2 check1 radio2 option3"><img src="img/img-9.jpg" alt="Image 9"></li>
<li class="mix color-1 check3 radio2 option4"><img src="img/img-10.jpg" alt="Image 10"></li>
<li class="mix color-1 check3 radio3 option2"><img src="img/img-11.jpg" alt="Image 11"></li>
<li class="mix color-2 check1 radio3 option1"><img src="img/img-12.jpg" alt="Image 12"></li>
<li class="gap"></li>
<li class="gap"></li>
<li class="gap"></li>
</ul>
<div class="cd-fail-message">No results found</div>
</section> <!-- cd-gallery -->
</div>
</div>
<div class="pagethree">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<h2 class="text-center about-txt"><a id="3" href="#">About Me</a></h2>
<img src="images/Profile-image.png" class="img-responsive img-rounded center-block" alt="My Face :)">
</div>
</div>
<div class="row">
<div class="col-sm-12">
<p class="text-center about">To tell you a little more about me, I have decided to make this short
personal description. I love doing many things: design, photography, architecture, coffee
and all of these traits represent me. I thrive in a social environment, loving the interaction between
co-workers and clients. People say I’m funny and this makes working with me an ease.</p>
</div>
</div>
</div>
</div>
<div class="pagefour">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="jumbotron">
<h2>Feel free to contact me at <span>info#freirobert.com</span></h2>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<p>You can also find me on social media on the links below</p>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<i class="fa fa-linkedin-square fa-2x" aria-hidden="true"></i>
<i class="fa fa-instagram fa-2x" aria-hidden="true"></i>
<i class="fa fa-behance-square fa-2x" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container-fluid">
<p class="text-center">©Robert Frei 2016</p>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<!-- Resource Content Filter -->
<script src="js/jquery-2.1.1.js"></script>
<script src="js/jquery.mixitup.min.js"></script>
<script src="js/main.js"></script> <!-- Resource jQuery -->
<script src="js/add.js"></script>
</body>
</html>
The css to the item required
.pagetwo {
background-color: white;
background-size: cover;
}
.darkNav {
background-color: black !important;
}
And my JS which does not work....
$(function () {
var header = $('.navbar-default .navbar-toggle .icon-bar');
var logo = $('#logo');
var hieghtThreshold = $(".pagetwo").offset().top;
var hieghtThreshold_end = $(".pagetwo").offset().top + $(".pagetwo").height();
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= hieghtThreshold && scroll <= hieghtThreshold_end ) {
console.log("WORKS!!!!!");
//logo.attr("src","/images/Logo-black.png");
//header.addClass("darkNav");
} else {
alert("IT BROKE!");
//logo.attr("src","/images/Logo.png");
//header.removeClass("darkNav");
}
});
})
This will execute every time when the window is scrolled. Go to the magic threshold and see that the WORKS!!!!! comment comes in the console. Replacing alert() with console.log() will throw nice light on it.
The $(window).scroll() fires continuously while scrolling the page. So since you have used alert() it keeps firing every time you scroll, and shows you BROKE!.
i got the plugin from this link http://www.jqueryscript.net/other/jQuery-Plugin-For-Smooth-Scroll-To-Top-Bottom-scrollToTop.html.i attcahed the code below of my index.html.i tried many jquery plugin but it did n't work for me.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0" />
<title>Pharmaceutical</title>
<link rel="shortcut icon" type="image/x-icon" href="css/images/favi.png" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<link href='http://fonts.googleapis.com/css?family=Raleway:400,900,800,700,600,500,300,200,100' rel='stylesheet' type='text/css'>
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/jquery.totop.js" type="text/javascript"></script>
<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
<!--[if lt IE 9]>
<script src="js/modernizr.custom.js"></script>
<![endif]-->
<script type="text/javascript" src="jquery.js"></script>
<script src="js/jquery.carouFredSel-5.5.0-packed.js" type="text/javascript"></script>
<script src="js/functions.js" type="text/javascript"></script>
</head>
<body>
<!-- wrapper -->
<div id="wrapper">
<!-- shell -->
<div class="shell">
<!-- container -->
<div class="container">
<!-- header -->
<header id="header">
<h1 id="logo">Retina</h1>
<!-- search -->
<div class="search">
<form action="" method="post">
<input type="text" class="field" value="keywords here ..." title="keywords here ..." />
<input type="submit" class="search-btn" value="" />
<div class="cl"> </div>
</form>
</div>
<!-- end of search -->
<div class="cl"> </div>
</header>
<!-- end of header -->
<!-- navigaation -->
<div id="menu">
<ul class="menu">
<li><span>Home</span>
<div><ul>
<li><span>About us</span></li>
<li><span>History</span>
<div><ul>
<li><span>Medicine</span>
<div><ul>
<li><span>Generic</span></li>
<li><span>Branded</span></li>
</ul></div>
</li>
</ul></div>
</li>
<li><span>Doctors</span></li>
<li><span>pharmaceutical establishment</span></li>
<li><span>Contact us</span></li>
</ul></div>
</li>
<li><span>Doctors zone</span>
<div><ul>
<li><span>Search Doctors</span>
<div><ul>
<li><span>By area</span></li>
<li><span>By disease</span></li>
</ul></div>
</li>
<li><span>Doctors visits</span>
<div><ul>
<li><span>By area</span></li>
<li><span>By state</span></li>
</ul></div>
</li>
<li><span>Doctors Reaserch</span></li>
<li><span>Doctors specialization</span></li>
</ul></div>
</li>
<li><span>Pharmaceutical zone</span>
<div><ul>
<li><span>Search Pharmacies</span>
<div><ul>
<li><span>By area</span></li>
<li><span>Door delivery</span></li>
</ul></div>
</li>
<li><span>Offer zone</span>
<div><ul>
<li><span>Medicine offer</span></li>
<li><span>Cosmetics offer</span></li>
</ul></div>
</li>
</ul></div>
</li>
<li><span>Ask questions</span>
<div><ul>
<li><span>To doctors</span>
<div><ul>
<li><span>By area</span></li>
<li><span>By disease</span></li>
</ul></div>
</li>
<li><span>To pharmacies</span>
<div><ul>
<li><span>By area</span></li>
<li><span>Get a contact details</span></li>
</ul></div>
</li>
</ul></div>
</li>
<li class="last"><span>Online Appointment Fixing</span></li>
<li class="last"><span>Gallery</span></li>
<li class="last"><span>Donate</span></li>
<li class="last"><img src="css/images/ini.png" alt="" /></li>
</ul>
</div>
<!-- end of navigation -->
<!-- slider-holder -->
<div class="slider-holder">
<!-- slider -->
<div class="slider">
<div class="socials">
facebook-ico
twitter-ico
skype-ico
rss-ico
<div class="cl"> </div>
</div>
<div class="arrs">
</div>
<ul>
<li id="img1">
<div class="slide-cnt">
<h4>MEDICAL CHECKUP</h4>
<h2>Free medical test..let's go</h2>
<p>Free CMR scan,full body scan,pressure,sugar checkup is in progress! Read more</p>
</div>
<img src="css/images/cli7.png" alt="" />
</li>
<li id="img2">
<div class="slide-cnt">
<h4>CLINICAL SHOPPING</h4>
<h2>Get near by clinical and testing shop!</h2>
<p>Find a near by clinical shop and blood testing centres! Read more</p>
</div>
<img src="css/images/cli5.png" alt="" />
</li>
<li id="img3">
<div class="slide-cnt">
<h4>DOCTORS AND MEDICAL S sHOOPING</h4>
<h2>Let check out the medicine</h2>
<p>find a nearby medical shop and Doctors..let's acquire a offer!Read more</p>
</div>
<img src="css/images/cli1.png" alt="" />
</li>
<li id="img4">
<div class="slide-cnt">
<h4>EXPLORE YOUR IDEAS AND CHECK MEDICAL STRATEGY</h4>
<h2>upload your nearby details</h2>
<p>let help others to know about all the stuff about pharmaceutical details!Read more</p>
</div>
<img src="css/images/mac-img.png" alt="" />
</ul>
</div>
<!-- end of slider -->
<!-- thumbs -->
<div id="thumbs-wrapper">
<div id="thumbs">
<img src="css/images/cli7.png" />
<img src="css/images/cli5.png" />
<img src="css/images/cli1.png" />
<img src="css/images/mac-img.png" />
</div>
<a id="prev" href="#"></a>
<a id="next" href="#"></a>
</div>
<!-- end of thumbs -->
</div>
<!-- main -->
<div class="main">
<div class="featured">
<h4>Welcome to <strong>Pharmaceutical Datawarehouse.</strong> Login to know all the stuff about Doctors and Medicines <strong>FREE!</strong>Explore and acquire the Life things</h4>
GET IN TOUCH
</div>
<section class="cols">
<div class="col">
<h3>Daily Health Tips</h3>
<img src="css/images/fruit.png" alt="" class="left"/>
<h5>Make your day healthy and hygienic</h5>
<p>All foods made from meat, poultry, seafood, beans and peas, eggs, processed soy products, nuts, and seeds are considered part of the Protein Foods Group. Beans and peas are also part of the Vegetable Group. For more information on beans and peas, see Beans and Peas Are Unique Foods. <br />Read more</p>
</div>
<div class="col">
<h3>We’re Hiring</h3>
<img src="css/images/hiring.png" alt="" class="left"/>
<h5>We are looking people for doing health services </h5>
<div class="cl"> </div>
<p>Make our country disease free!let's join your hand with us to serve for the humanity!Just login to register your valuable service <br />Click here to LOGIN</p>
</div>
<div class="col">
<h3>Our Services</h3>
<ul>
<li>Get a Doctor details near by your area</li>
<li>Grab the Hospitals details near by your area </li></br></br>
<video width="250" height="240" controls>
<source src="hygiene.mp4" type="video/mp4">
<source src="hygiene.ogg" type="video/ogg">
<source src="hygiene.webm" type="video/webm">
<object data="hygiene.mp4" width="250" height="240">
<embed src="hygiene.mp4" width="250" height="240">
</object>
</video>
</ul>
</div>
<div class="cl"> </div>
</section>
<section class="entries">
<div class="entry">
<h3>Latest Blog Posts</h3>
<div class="entry-inner">
<div class="date">
<strong>01</strong>
<span>2012</span>
<em>feb</em>
</div>
<div class="cnt">
<p>pharmaceutical<br /> Reaserch</p>
<p class="meta">by John Doe / Cipla pharma</p>
</div>
</div>
<div class="entry-inner">
<div class="date">
<strong>28</strong>
<span>2012</span>
<em>jan</em>
</div>
<div class="cnt">
<p>Research in thyroid<br /> bones</p>
<p class="meta">by shaullah / Sun pharma</p>
</div>
</div>
<div class="entry-inner">
<div class="date">
<strong>11</strong>
<span>2012</span>
<em>feb</em>
</div>
<div class="cnt">
<p>Medical awareness<br /> Camp</p>
<p class="meta">by indian government / Awareness camp</p>
</div>
</div>
</div>
<div class="entry">
<h3>Latest Project</h3>
<h5>Recent summer projects completed by MSc Medical Microbiology students </h5>
<img src="css/images/pro.png" a alt="" />
<p> Analysis of Human Antibody Responses to a Novel Polymorphic Plasmodium falciparum Merozoite Protein from the Antigenic Rich Region of Chromosome <br />view more</p>
</div>
<div class="entry">
<h3>Testimonials</h3>
<div class="testimonials">
<p><strong>“</strong>Pharmaceutical Datawarehouse really doing well and the serving for the humanity to be healthy and hygienic”</p>
<p class="author">John Doe, <strong>Cipla Pharma</strong></p>
</div>
<div class="partners">
<h3>Our Partners</h3>
<img src="css/images/partners-img.png" alt="" />
</div>
</div>
<div class="cl"> </div>
</section>
</div>
<!-- end of main -->
<div class="cl"> </div>
<!-- footer -->
<div id="footer">
<div class="footer-nav">
<ul>
<li>Home</li>
<li>Doctors zone</li>
<li>Pharamaceutical Zone</li>
<li>Ask aQuestion </li>
<li>Get a free health tips</li>
<li>Gallery</li>
<li>Donate us</li>
</ul>
<div class="cl"> </div>
</div>
<p class="copy">© Copyright 2012<span>|</span>Sitename. Design by Nawaz</p>
<div class="cl"> </div>
</div>
<!-- end of footer -->
</div>
<!-- end of container -->
</div>
<!-- end of shell -->
</div>
<!-- end of wrapper -->
<div id="totopscroller"> </div>
<script>
$(function(){
$('#totopscroller').totopscroller({link:'http://www.jqueryscript.net'});
})
</script>
</body>
</html>
This error is about that plugin is not inited. You init plugin before jQuery:
<script src="js/jquery.totop.js" type="text/javascript"></script>
<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
Change to this:
<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="js/jquery.totop.js" type="text/javascript"></script>
i'm becoming mad... I would like to add this bar:
(source: bindtuning.com)
(using seattle.master - view)
in a simple custom page created by me.
In my case, I've "index.aspx" in the same folder of "Home.aspx" (the folder is SitePages),
"index.aspx" is a Html5 page w/ css3 and js pages (I uploaded the code just to have a complete post)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<%# Page Language="C#" %>
<%# Register tagprefix="SharePoint" namespace="Microsoft.SharePoint.WebControls" assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=*" %>
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta name="WebPartPageExpansion" content="full" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HomePage | Fabio Test's Page</title>
<meta http-equiv="X-UA-Compatible" content="IE=10" />
<SharePoint:CssRegistration Name="default" runat="server"/>
<link rel="stylesheet" href="../SiteAssets/SitePages/Home/css/main_style.css" type="text/css"/>
<link rel="stylesheet" href="../SiteAssets/SitePages/Home/css/fractionslider.css" type="text/css"/>
<link rel='stylesheet' href='../SiteAssets/SitePages/Home/css/navigation.css' type="text/css"/>
<link rel="stylesheet" href="../SiteAssets/SitePages/Home/css/slider.css" type="text/css" charset="utf-8" />
<script src='../SiteAssets/SitePages/Home/js/jquery.color-RGBa-patch.js'></script>
<script src="../SiteAssets/SitePages/Home/js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src='../SiteAssets/SitePages/Home/js/navigation.js'></script>
<script src="../SiteAssets/SitePages/Home/js/jquery.fractionslider.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../SiteAssets/SitePages/Home/js/main.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="../SiteAssets/SitePages/Home/js/mosaic.1.0.1.min.js"></script>
<script type="text/javascript">
jQuery(function($){
$('.bar2').mosaic({
animation : 'slide' //fade or slide
});
});
</script>
<!--[if gte IE 9]>
<style type="text/css">
.gradient {
filter: none;
}
</style>
<![endif]-->
</head>
<body oncontextmenu="return false" onselectstart="return false">
<div id="site_content">
<noscript>Javascript?</noscript>
<div id="top_bar"><br/><br/>
<img id="logo" alt="Logo" src="../SiteAssets/SitePages/Home/img/logo.jpg" />
</div>
<div id="centralign">
<div class="centralDiv_first mosaic-block bar2" id="first_div">
<a href="#" class="mosaic-overlay">
<div class="details">
<h4>MIS</h4><br/>
<p>Management of Information Systems</p>
</div>
</a>
<div class="mosaic-backdrop"><img src="../SiteAssets/SitePages/Home/img/centralDiv/icon_1.jpg" onclick="window.open('#','_self',false)"/></div>
</div>
<div class="centralDiv_first mosaic-block bar2" id="second_div">
<a href="#" class="mosaic-overlay">
<div class="details">
<h4>Finance</h4><br/>
<p>I hope that there are money for sponsorships.</p>
</div>
</a>
<div class="mosaic-backdrop"><img src="../SiteAssets/SitePages/Home/img/centralDiv/icon_2.jpg" onclick="window.open('#','_self',false)"/></div>
</div>
<div class="centralDiv_first mosaic-block bar2" id="third_div">
<a href="#" class="mosaic-overlay">
<div class="details">
<h4>HR</h4><br/>
<p>Human Resources</p>
</div>
</a>
<div class="mosaic-backdrop"><img src="../SiteAssets/SitePages/Home/img/centralDiv/icon_3.jpg" onclick="window.open('#','_self',false)"/></div>
</div>
<div class="centralDiv_first mosaic-block bar2" id="fourth_div">
<a href="#" class="mosaic-overlay">
<div class="details">
<h4>Forms</h4><br/>
<p>Check it out!</p>
</div>
</a>
<div class="mosaic-backdrop"><img src="../SiteAssets/SitePages/Home/img/centralDiv/icon_4.jpg" onclick="window.open('https://uscri.sharepoint.com/Forms/Forms/AllItems.aspx','_self',false)"/></div>
</div>
<a href="#">
<div class="centralDiv_second mosaic-block bar">
<div class="mosaic-backdrop">
<img src="../SiteAssets/SitePages/Home/img/centralDiv/icon_small_1.jpg"/>
</div>
</div>
</a>
<a href="#">
<div class="centralDiv_second mosaic-block bar">
<div class="mosaic-backdrop">
<img src="../SiteAssets/SitePages/Home/img/centralDiv/icon_small_2.jpg"/>
</div>
</div>
</a>
<a href="#">
<div class="centralDiv_second mosaic-block bar">
<div class="mosaic-backdrop">
<img src="../SiteAssets/SitePages/Home/img/centralDiv/icon_small_3.jpg"/>
</div>
</div>
</a>
<a href="#">
<div class="centralDiv_second mosaic-block bar">
<div class="mosaic-backdrop">
<img src="../SiteAssets/SitePages/Home/img/centralDiv/icon_small_4.jpg"/>
</div>
</div>
</a>
<a href="#">
<div class="centralDiv_second mosaic-block bar">
<div class="mosaic-backdrop">
<img src="../SiteAssets/SitePages/Home/img/centralDiv/icon_small_5.jpg"/>
</div>
</div>
</a>
<a href="#">
<div class="centralDiv_second mosaic-block bar">
<div class="mosaic-backdrop">
<img src="../SiteAssets/SitePages/Home/img/centralDiv/icon_small_undefined.jpg"/>
</div>
</div>
</a>
<a href="#">
<div class="centralDiv_second mosaic-block bar">
<div class="mosaic-backdrop">
<img src="../SiteAssets/SitePages/Home/img/centralDiv/icon_small_undefined.jpg"/>
</div>
</div>
</a>
<a href="#">
<div class="centralDiv_second mosaic-block bar">
<div class="mosaic-backdrop">
<img src="../SiteAssets/SitePages/Home/img/centralDiv/icon_small_undefined.jpg"/>
</div>
</div>
</a>
</div><br/><br/>
<div id="footer">For general inquiries, please email</div>
</div>
</body>
</html>
I tried to modify the seattle.master, trying to leave just the top bar (called SuiteBar) and wrote the code in the had tag and in the body, but javascript doesn't work and also there is an overwriting of tags in css files.
I appreciate any suggestion to solve the problem!
Thank you
most probalbly the JS and the css are not referenced correctly.
the code above is a master page. try to use the following
/SiteAssets/SitePages/Home/css/main_style.css just remove the ../
assuming you have a document library called SiteAssets in the rooSite as / is always referring to the rootsite, and you have a folder called SitePages inside this document library and another one under Sitepages called Home ... etc.
if your SiteAssets document library is not in the rootsite and you want to reference it in the current subsite use the directive <%$ SPUrl: ~site/SiteAssets/SitePages/Home/css/main_style.css %>