I am trying to implement a fixed side menu that updates the active page link with the active class. I placed the scroll spy HTML5 elements on the body, but I am having issues. Can someone checkout my html file and see if they can determine what's wrong and provide me some solutions to this problem?
Here is the link to my github account for this: https://github.com/thlee1122/profile
Here is how my current navigation section in the html file look like:
body data-spy="scroll" data-target="#navbar-example">
<div class = "header">
<div class = "container">
<div class="video-section">
<video autoplay muted loop>
<source src="macbook.mp4" type="video/mp4">
</video>
<div class="section-content container">
<h1>Tae Hoon Lee</h1>
<hr></hr>
<h4>Interactive Portfolio</h4>
<!--<p><a class="btn" href="#">Email Me</a></p>-->
</div>
</div>
</div>
</div>
<div class="main" id="profile-intro">
<div class="container">
<h1>Profile</h1>
<h3>I'm a creative Front end developer.</h3>
<hr></hr>
</div>
</div>
<div id="top" class="jumbotron">
<a href="#profile" class="scroll-down">
<span class="glyphicon glyphicon-chevron-down"></span>
</a>
<div class="navbar navbar-default" id="navbar-example" role="navigation">
<div>
<div class="navbar-header"></div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active">
Profile
</li>
<li class>
Experiences
<li>
<li class>
Skills
</li>
<li class>
Projects
</li>
<li class>
Contact
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
I think I have it working! I'm gonna submit I pull request to your github.
Related
I would like to change an image on my website into a link using Javascript so that when users click the image they are redirected to a website. My html code and Javascript code are as follows. I tried mimicking what was mentioned in this thread but was unsuccessful (how to add a link to an image using jquery?).
The image I am trying to create a link for is http://mywebsite.com/wp-content/uploads/job-manager-uploads/job_cover/2017/10/bbbb-1024x1024.jpg
Thank you for your help.
My Javascript code
jQuery('.profile-avatar.open-photo-swipe').wrap($('<a>',{
href: link2;
}));
My HTML code
<div class="profile-header">
<div class="container">
<div class="row">
<div class="col-md-12">
<div v-pre>
<a class="profile-avatar open-photo-swipe"
href="http://mywebsite.com/wp-content/uploads/job-manager-uploads/job_cover/2017/10/bbbb-1024x1024.jpg"
style="background-image: url('http://mywebsite.com/wp-content/uploads/job-manager-uploads/job_cover/2017/10/bbbb-300x300.jpg')"
data-width="1024"
data-height="576"
>
</a>
</div>
<div class="profile-name" v-pre>
<h1 class="case27-primary-text">Offer 2</h1>
<h2>blag</h2>
</div>
<div class="cover-details" v-pre>
<ul></ul>
</div>
<div class="profile-menu">
<ul role="tablist">
<li class="active">
<a href="#_tab_1" aria-controls="_tab_1" data-section-id="_tab_1"
role="tab" class="tab-reveal-switch toggle-tab-type-main">
Profile </a>
</li><li class="">
<a href="#_tab_2" aria-controls="_tab_2" data-section-id="_tab_2"
role="tab" class="tab-reveal-switch toggle-tab-type-comments">
Comments
<span class="items-counter">0</span>
</a>
</li> <div id="border-bottom"></div>
</ul>
</div>
</div>
</div>
</div>
</div>
jQuery('.profile-avatar.open-photo-swipe')
This element is a link, not image:
<a class="profile-avatar open-photo-swipe"
href="http://mywebsite.com/wp-content/uploads/job-manager-uploads/job_cover/2017/10/bbbb-1024x1024.jpg"
So use
jQuery('.profile-avatar.open-photo-swipe').prop('href', link2)
I have a nav-pills element incorporated in my web page, which works perfectly.
The li tag will have a class of "active" if I'm on that tab and will only have a class of "test" if I'm not currently on that tab.
What I'm also trying to do is have an additional button for next and previous, so if I'm on the "Menu 1" tab and I hit next, I can go back to the "Introduction" tab. I attempted to have the button trigger the link but it doesn't work.
<div class="card">
<div class="header">
<div class="col-sm-12 text-center">
<ul class="nav nav-pills center-pills">
<li class="active" id="first" class="test"><a id="link1" class="test" href="#home">Introduction</a></li>
<li class="test">Menu 1</li>
</ul>
</div>
</div>
<div class="content">
<div class="tab-content">
<!--first tab-->
<div id="home" class="tab-pane fade in active">
<h3>Introduction</h3>
<p>Random Text </p>
<button id="next-step" class="btn btn-basic">Next</button>
</div>
<div id="menu1" class="tab-pane fade in active">
<h3>Menu1</h3>
<button id="back-step" class="btn btn-basic">Back</button>
</div>
</div>
</div>
</div>
</div>
My JavaScript looks like:
$('#back-step').click(function(){
$('link1').trigger("click");
});
$(".nav-pills a").click(function(){
if ($('#first').hasClass('active')){
$('#first').addClass('test').removeClass('active');
}
$(this).tab('show');
});
It looks like there's a typo in your JavaScript. You're not targeting the #link1 id. Try $('#link1').trigger("click"); (note the hash).
I am having troubles with Isotope on Navbar. I would like the content to be switched when selecting different Navbar items.
Not sure what do I have to do, this is simplified version of what I have for now.
I guess I need some Javascript that will handle the switching from navbar's href's to isotope's classes? Is this possible like this?
HTML Navbar
<nav class="navbar">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
<i class="fa fa-bars"></i>
</button>
</div>
<div class="collapse navbar-collapse navbar-main-collapse" id="#options">
<ul class="nav navbar-nav">
<li>
Home
</li>
<li>
About
</li>
</div>
</nav>
HTML Content
<section class="main-content">
<div class="isotope-elements-grid" id="isotope-elements-grid">
<div class="isotope-element home">
<p>Some random text on Home</p>
</div>
<div class="isotope-element about">
<p>Some random text on About</p>
</div>
</div>
</section>
Javascript
$('.isotope-elements-grid').isotope({
// options
itemSelector: '.isotope-element',
layoutMode: 'fitRows'
});
Recently i switched to materialize (it's based on Bootstrap i guess) and i'm trying to make modal work. it just doesn't show up. the button is there but it triggers nothing. I'm using starter template from Materialize website.
All i did was copy and paste modal code from Materialize modal page. I put the code in starter template but it doesn't work. i also tested it on another theme based on materialize but that didn't work either.
also jQuery is loaded properly.
edit: it's index.html
<!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, maximum-scale=1.0, user-scalable=no"/>
<title>Starter Template - Materialize</title>
<!-- CSS -->
<link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
</head>
<body>
<nav class="light-blue lighten-1" role="navigation">
<div class="container">
<div class="nav-wrapper"><a id="logo-container" href="#" class="brand-logo">Logo</a>
<ul class="right">
<li>Navbar Link</li>
</ul>
<ul id="nav-mobile" class="side-nav">
<li>Navbar Link</li>
</ul>
<i class="mdi-navigation-menu"></i>
</div>
</div>
</nav>
<div class="section no-pad-bot" id="index-banner">
<div class="container">
<br><br>
<h1 class="header center orange-text">Starter Template</h1>
<div class="row center">
<h5 class="header col s12 light">A modern responsive front-end framework based on Material Design</h5>
</div>
<div class="row center">
<button data-target="#modal1" class="btn modal-trigger">Modal</button>
</div>
<!-- Modal Structure -->
<div id="modal1" class="modal modal-fixed-footer">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
Agree
</div>
</div>
<br><br>
</div>
</div>
<div class="container">
<div class="section">
<!-- Icon Section -->
<div class="row">
<div class="col s12 m4">
<div class="icon-block">
<h2 class="center light-blue-text"><i class="mdi-image-flash-on"></i></h2>
<h5 class="center">Speeds up development</h5>
<p class="light">We did most of the heavy lifting for you to provide a default stylings that incorporate our custom components. Additionally, we refined animations and transitions to provide a smoother experience for developers.</p>
</div>
</div>
<div class="col s12 m4">
<div class="icon-block">
<h2 class="center light-blue-text"><i class="mdi-social-group"></i></h2>
<h5 class="center">User Experience Focused</h5>
<p class="light">By utilizing elements and principles of Material Design, we were able to create a framework that incorporates components and animations that provide more feedback to users. Additionally, a single underlying responsive system across all platforms allow for a more unified user experience.</p>
</div>
</div>
<div class="col s12 m4">
<div class="icon-block">
<h2 class="center light-blue-text"><i class="mdi-action-settings"></i></h2>
<h5 class="center">Easy to work with</h5>
<p class="light">We have provided detailed documentation as well as specific code examples to help new users get started. We are also always open to feedback and can answer any questions a user may have about Materialize.</p>
</div>
</div>
</div>
</div>
<br><br>
<div class="section">
</div>
</div>
<footer class="page-footer orange">
<div class="container">
<div class="row">
<div class="col l6 s12">
<h5 class="white-text">Company Bio</h5>
<p class="grey-text text-lighten-4">We are a team of college students working on this project like it's our full time job. Any amount would help support and continue development on this project and is greatly appreciated.</p>
</div>
<div class="col l3 s12">
<h5 class="white-text">Settings</h5>
<ul>
<li><a class="white-text" href="#!">Link 1</a></li>
<li><a class="white-text" href="#!">Link 2</a></li>
<li><a class="white-text" href="#!">Link 3</a></li>
<li><a class="white-text" href="#!">Link 4</a></li>
</ul>
</div>
<div class="col l3 s12">
<h5 class="white-text">Connect</h5>
<ul>
<li><a class="white-text" href="#!">Link 1</a></li>
<li><a class="white-text" href="#!">Link 2</a></li>
<li><a class="white-text" href="#!">Link 3</a></li>
<li><a class="white-text" href="#!">Link 4</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
Made by <a class="orange-text text-lighten-3" href="http://materializecss.com">Materialize</a>
</div>
</div>
</footer>
<!-- Scripts-->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="js/materialize.js"></script>
<script src="js/init.js"></script>
<script> $(document).ready(function(){
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('.modal-trigger').leanModal();
});</script>
</body>
</html>
modal code:
<!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
<!-- Modal Structure -->
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
Agree
</div>
</div>
Here's a demo of Starter template
Here's download link of template
In the version v0.97.8 (October 30th, 2016) modal plugin has been refactored according to the updates from github. Now, the initialization of the plugin is done differently, like in the example below.
$(document).ready(function(){
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('.modal').modal();
});
I think you forgot to attach the plugin to the button.
$(document).ready(function() {
$('.modal-trigger').leanModal();
});
Also change this line data-target="#modal1"
<button data-target="#modal1" class="btn modal-trigger">Modal</button>
In to this line data-target="modal1", you inserted # by mistake, a loudy error noticed me in console.
<button data-target="modal1" class="btn modal-trigger">Modal</button>
See the snippet below for working example.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js"></script>
<nav class="light-blue lighten-1" role="navigation">
<div class="container">
<div class="nav-wrapper"><a id="logo-container" href="#" class="brand-logo">Logo</a>
<ul class="right">
<li>Navbar Link</li>
</ul>
<ul id="nav-mobile" class="side-nav">
<li>Navbar Link</li>
</ul>
<i class="mdi-navigation-menu"></i>
</div>
</div>
</nav>
<div class="section no-pad-bot" id="index-banner">
<div class="container">
<br><br>
<h1 class="header center orange-text">Starter Template</h1>
<div class="row center">
<h5 class="header col s12 light">A modern responsive front-end framework based on Material Design</h5>
</div>
<div class="row center">
<button data-target="modal1" class="btn modal-trigger">Modal</button>
</div>
<!-- Modal Structure -->
<div id="modal1" class="modal modal-fixed-footer">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
Agree
</div>
</div>
<br><br>
</div>
</div>
<div class="container">
<div class="section">
<!-- Icon Section -->
<div class="row">
<div class="col s12 m4">
<div class="icon-block">
<h2 class="center light-blue-text"><i class="mdi-image-flash-on"></i></h2>
<h5 class="center">Speeds up development</h5>
<p class="light">We did most of the heavy lifting for you to provide a default stylings that incorporate our custom components. Additionally, we refined animations and transitions to provide a smoother experience for developers.</p>
</div>
</div>
<div class="col s12 m4">
<div class="icon-block">
<h2 class="center light-blue-text"><i class="mdi-social-group"></i></h2>
<h5 class="center">User Experience Focused</h5>
<p class="light">By utilizing elements and principles of Material Design, we were able to create a framework that incorporates components and animations that provide more feedback to users. Additionally, a single underlying responsive system across all platforms allow for a more unified user experience.</p>
</div>
</div>
<div class="col s12 m4">
<div class="icon-block">
<h2 class="center light-blue-text"><i class="mdi-action-settings"></i></h2>
<h5 class="center">Easy to work with</h5>
<p class="light">We have provided detailed documentation as well as specific code examples to help new users get started. We are also always open to feedback and can answer any questions a user may have about Materialize.</p>
</div>
</div>
</div>
</div>
<br><br>
<div class="section">
</div>
</div>
<footer class="page-footer orange">
<div class="container">
<div class="row">
<div class="col l6 s12">
<h5 class="white-text">Company Bio</h5>
<p class="grey-text text-lighten-4">We are a team of college students working on this project like it's our full time job. Any amount would help support and continue development on this project and is greatly appreciated.</p>
</div>
<div class="col l3 s12">
<h5 class="white-text">Settings</h5>
<ul>
<li><a class="white-text" href="#!">Link 1</a></li>
<li><a class="white-text" href="#!">Link 2</a></li>
<li><a class="white-text" href="#!">Link 3</a></li>
<li><a class="white-text" href="#!">Link 4</a></li>
</ul>
</div>
<div class="col l3 s12">
<h5 class="white-text">Connect</h5>
<ul>
<li><a class="white-text" href="#!">Link 1</a></li>
<li><a class="white-text" href="#!">Link 2</a></li>
<li><a class="white-text" href="#!">Link 3</a></li>
<li><a class="white-text" href="#!">Link 4</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
Made by <a class="orange-text text-lighten-3" href="http://materializecss.com">Materialize</a>
</div>
</div>
</footer>
<script>
$(document).ready(function() {
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('.modal-trigger').leanModal();
});
</script>
For updated code you should initialize
$(document).ready(function() {
$('.modal').modal();
});
I am trying to use the metro UI css library but I can't figure out why my navbar css is not working.
Here's my html file code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>TelePrint Blog</title>
<link rel="stylesheet" href="http://localhost/teleprintblog/assets/css/metro-bootstrap.css">
<script src="http://localhost/teleprintblog/assets/js/jquery.js"></script>
<script src="http://localhost/teleprintblog/assets/js/metro.min.js"></script>
</head>
<body>
<nav class="navigation-bar dark fixed">
<nav class="navigation-bar-content">
<div class="element">
<a class="dropdown-toggle" href="#">METRO UI CSS</a>
<ul class="dropdown-menu" data-role="dropdown">
<li>Main</li>
<li>File Open</li>
<li class="divider"></li>
<li>Print...</li>
<li class="divider"></li>
<li>Exit</li>
</ul>
</div>
<span class="element-divider"></span>
<a class="element brand" href="#"><span class="icon-spin"></span></a>
<a class="element brand" href="#"><span class="icon-printer"></span></a>
<span class="element-divider"></span>
<div class="element input-element">
<form>
<div class="input-control text">
<input type="text" placeholder="Search...">
<button class="btn-search"></button>
</div>
</form>
</div>
<div class="element place-right">
<a class="dropdown-toggle" href="#">
<span class="icon-cog"></span>
</a>
<ul class="dropdown-menu place-right" data-role="dropdown">
<li>Products</li>
<li>Download</li>
<li>Support</li>
<li>Buy Now</li>
</ul>
</div>
<span class="element-divider place-right"></span>
<a class="element place-right" href="#"><span class="icon-locked-2"></span></a>
<span class="element-divider place-right"></span>
<button class="element image-button image-left place-right">
Sergey Pimenov
<img src="images/211858_100001930891748_287895609_q.jpg"/>
</button>
</nav>
</nav>
<header class="headerr row">
<div class="col-md-6" style="border:3px solid #F00;">
<img src="http://localhost/teleprintblog/assets/img/logo.png"
class="img-responsive" alt="logo"/>
</div>
<div class="col-md-6" style="border:3px solid #F00;">
</div>
</header>
<section class="row">
<div class="col-md-1 col-xs-offset-1"
style="border:3px solid #00F;z-index:3;position:relative;">
asdasda
</div>
</section>
</body>
</html>
The UI is not appearing properly for the nav-bar although I've loaded the required files.What is causing the problem ?
I've copied the navbar code from here.
Change:
<nav class="navigation-bar dark fixed">
To:
<nav class="navigation-bar dark fixed-top"> <!-- Or fixed-bottom -->
As stated in the documentation:
You can create fixed (top or bottom) navigation bar with built in subclasses `.fixed-top, .fixed-bottom.
The issue with Metro Bootstrap UI CSS aka http://metroui.org.ua/ is this:
You load the theme to localhost, or mabe into a MCV framework, and the dropdown doesnt work! Right?
Okay so look for this line in the html file
<script src="js/load-metro.js"></script>
This is where the problem is.
You can open this file and see the contents - its best to use a full url to include the JS files. I myself removed this line from my files:
<script src="js/load-metro.js"></script>
And I replaced it with the contents:
<script type="text/javascript">
$(function(){
if ((document.location.host.indexOf('.dev') > -1) || (document.location.host.indexOf('modernui') > -1) ) {
$("<script/>").attr('src', '<?=base_url('adminstyle')?>/js/metro/metro-loader.js').appendTo($('head'));
} else {
$("<script/>").attr('src', '<?=base_url('adminstyle')?>/js/metro.min.js').appendTo($('head'));
}
})
</script>
now you will notice I use base_url() - this is for my case only. Replace that with your full url and walla the dropdown should be working.