This code below for the menu, all links scroll down to a certain section, except for the Blog button that should send the user to another link, but it doesn't work, it only works if I write click and choose open in new tab
here is the code
<div class="header-menu-and-meta">
<ul id="main-menu" class="main-menu">
<li><a data-scroll-nav="4" href="#cta-title-1">contact</a></li>
<li><a data-scroll-nav="3" href="#clients-testmonials">clients</a></li>
<li><a data-scroll-nav="1" href="#fun-facts">about</a></li>
<li><a data-scroll-nav="0" href="#header">main</a></li>
</ul>
<div class="header-meta">
<div class="hm-content">
<a class="header-btn scroll-to btn small colorful hover-white" href="http://example.com/blog/">Blog</a>
</div><!-- .hm-content end -->
</div><!-- .header-meta end -->
<div class="mobile-menu-btn hamburger hamburger--slider">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</div><!-- .mobile-menu-btn -->
<!-- <div class="clearfix"></div> -->
</div><!-- .header-menu-and-meta end -->
If you want to open your link in a new tab you can use the target='_blank' attribute. If you wish to open it in the same window then don't include this attribute. See the code snippet below. (Note that the target blank attribute will not work on this site, so test it locally or on this fiddle)
Also, ensure the you have the full url, including www.
<div class="header-menu-and-meta">
<ul id="main-menu" class="main-menu">
<li><a data-scroll-nav="4" href="#cta-title-1">contact</a></li>
<li><a data-scroll-nav="3" href="#clients-testmonials">clients</a></li>
<li><a data-scroll-nav="1" href="#fun-facts">about</a></li>
<li><a data-scroll-nav="0" href="#header">main</a></li>
</ul>
<div class="header-meta">
<div class="hm-content">
<a class="header-btn scroll-to btn small colorful hover-white" href="http://www.example.com/blog/" target="_blank">Blog</a>
</div>
<!-- .hm-content end -->
</div>
<!-- .header-meta end -->
<div class="mobile-menu-btn hamburger hamburger--slider">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</div>
<!-- .mobile-menu-btn -->
<!-- <div class="clearfix"></div> -->
</div>
<!-- .header-menu-and-meta end -->
Its working fine for me it redirects to link.
<div class="header-menu-and-meta">
<ul id="main-menu" class="main-menu">
<li><a data-scroll-nav="4" href="#cta-title-1">contact</a></li>
<li><a data-scroll-nav="3" href="#clients-testmonials">clients</a></li>
<li><a data-scroll-nav="1" href="#fun-facts">about</a></li>
<li><a data-scroll-nav="0" href="#header">main</a></li>
</ul>
<div class="header-meta">
<div class="hm-content">
<a class="header-btn scroll-to btn small colorful hover-white" href="http://example.com/blog/">Blog</a>
</div><!-- .hm-content end -->
</div><!-- .header-meta end -->
<div class="mobile-menu-btn hamburger hamburger--slider">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</div><!-- .mobile-menu-btn -->
<!-- <div class="clearfix"></div> -->
</div><!-- .header-menu-and-meta end -->
You can control the behaviour of redirection of the anchor tags by setting the target attribute.
by default property it has is self: target="_self"
You want to achieve is target="_blank"
I took the image clip from Mozilla Developers Network.
Ok I found the problem it was in the JS files, the HTMLAnchorElement was set to preventdefault
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 large header section for a website that is split into three sections; social links, logo, and then the navigation bar. I am trying to figure out how I can hide the top two elements and resize the navigation bar and have it fixed when the user scrolls past it.
The nav bar currently just holds a link that will open up a separate side menu that holds all of the actual page navigation.
https://jsfiddle.net/cxekxrxy/2/
<header>
<!-- social links -->
<div id="social" class="social-header">
<div class="container">
<div class="row">
<ul>
<li class="social-icon"><i class="fa fa-facebook-official" aria-hidden="true"></i></li>
<li class="social-icon"><i class="fa fa-twitter-square" aria-hidden="true"></i></li>
<li class="social-icon"><i class="fa fa-instagram" aria-hidden="true"></i></li>
<li class="social-icon"><i class="fa fa-linkedin-square" aria-hidden="true"></i></li>
</ul>
</div>
</div>
</div>
<!-- logo -->
<div id="logo" class="logo-header">
<div class="container">
<div class="row">
<h1 class="logo-main">Main Header</h1>
<h2 class="logo-sub">Sub Header</h2>
</div>
</div>
</div>
<!-- Navigation -->
<div id="header" class="main-header">
<div class="container">
<div id="bars"><span class="glyphicon glyphicon-menu-hamburger text-right" id="nav-bars" style="font-size:25px; cursor:pointer" onclick="openNav()"></span></div>
</div>
<!-- nav links (hidden until <span> is pressed) -->
<div id="main-nav" class="side-nav">
×
<span class="glyphicon glyphicon-home"> Home</span>
<span class="glyphicon glyphicon-user"> About</span>
<span class="glyphicon glyphicon-picture"> Portfolio</span>
<span class="glyphicon glyphicon-envelope"> Contact</span>
</div>
</div>
</header>
You can see this neat example for your need:
https://css-tricks.com/scroll-fix-content/
And work with your code.
This is combination CSS and JS, and a simplest solution
.
I have this Li tag which shows notification dropdown in my bootstrap theme but the problem is if there is no content inside this li tag then also it is shown with 300px height, I have tried removing that height also but still no luck. How can I resize this li tag if there is no content inside it.
Content is shown in media-body tag
<li class="dropdown navbar-notification">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-bell"></i>
</a>
<div class="dropdown-menu">
<div class="dropdown-header">
<span class="title">Notifications
<strong>(0)</strong>
</span>
</div>
<div class="dropdown-body niceScroll">
<div class="media-list small">
<a href="" class="media">
<div class="media-object pull-left"><i class="fa fa-ban fg-danger"></i>
</div>
<div class="media-body">
<span class="media-text">No new Notification</span>
<!-- Start meta icon -->
<span class="media-meta"></span>
<!--/ End meta icon -->
</div>
<!-- /.media-body -->
</a>
</div>
</div>
<div class="dropdown-footer">
See All
</div>
</div>
</li>
$(".navbar-notification .niceScroll").mouseover(function() {
$(".navbar-notification .niceScroll").niceScroll({
cursorwidth: '10px',
cursorborder: '0px'
}).resize();
});
You can select empty element by css :empty selector and hide it:
element:empty {
display: none;
}
I have here in my views a sidebar and I got problem because the sidebar aren't clickable. I don't know what's the problem I read online about this problem but I do the right thing, Please can anyone help to check this out?
Do check my code below:
I have a master.blade.php: The code below.
<!DOCTYPE html>
<html lang="en">
<head>
#include('layouts.head')
</head>
<body>
<!-- START PAGE CONTAINER -->
<div class="page-container">
#include('layouts.sidebar')
<!-- PAGE CONTENT -->
<div class="page-content">
#include('layouts.navigation')
#include('layouts.breadcrumb')
<!-- PAGE CONTENT WRAPPER -->
<div class="page-content-wrap">
#yield('content')
</div>
<!-- END PAGE CONTENT WRAPPER -->
</div>
<!-- END PAGE CONTENT -->
</div>
<!-- END PAGE CONTAINER -->
#include('layouts.messagebox')
<!-- START PRELOADS -->
<audio id="audio-alert" src="audio/alert.mp3" preload="auto"></audio>
<audio id="audio-fail" src="audio/fail.mp3" preload="auto"></audio>
<!-- END PRELOADS -->
<!-- START SCRIPTS -->
<!-- START PLUGINS -->
{{HTML::script('js/plugins/jquery/jquery.min.js');}}
{{HTML::script('js/plugins/jquery/jquery-ui.min.js');}}
{{HTML::script('js/plugins/bootstrap/bootstrap.min.js');}}
<!-- END PLUGINS -->
<!-- START THIS PAGE PLUGINS-->
{{HTML::script('js/plugins/icheck/icheck.min.js');}}
{{HTML::script('js/plugins/mcustomscrollbar/jquery.mCustomScrollbar.min.js');}}
{{HTML::script('js/plugins/scrolltotop/scrolltopcontrol.js');}}
{{HTML::script('js/plugins/morris/raphael-min.js');}}
{{HTML::script('js/plugins/morris/morris.min.js');}}
{{HTML::script('js/plugins/rickshaw/d3.v3.js');}}
<!-- {{HTML::script('js/plugins/rickshaw/rickshaw.min.js');}} -->
{{HTML::script('js/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js');}}
{{HTML::script('js/plugins/jvectormap/jquery-jvectormap-world-mill-en.js');}}
{{HTML::script('js/plugins/bootstrap/bootstrap-datepicker.js');}}
{{HTML::script('js/plugins/owl/owl.carousel.min.js');}}
{{HTML::script('js/plugins/bootstrap/bootstrap-select.js');}}
<!-- END THIS PAGE PLUGINS-->
<!-- START TEMPLATE -->
{{HTML::script('js/ixepms.js');}}
<!-- {{HTML::script('js/settings.js');}} -->
{{HTML::script('js/plugins.js');}}
{{HTML::script('js/actions.js');}}
{{HTML::script('js/demo_dashboard.js');}}
<!-- END TEMPLATE -->
<!--START DATA TABLE TEMPLATES PLUGIN-->
{{HTML::script('js/plugins/datatables/jquery.dataTables.min.js')}}
<!--END DATA TABLE TEMPLATES PLUGIN-->
#yield('script')
#yield('department_script')
<!-- END SCRIPTS -->
</body>
</html>
As what you have noticed in the code, I #include in the masterpage a sidebar
layouts/sidebar.blade.php : Code below
<!-- START PAGE SIDEBAR -->
<div class="page-sidebar">
<!-- START X-NAVIGATION -->
<ul class="x-navigation">
#include('layouts.profile')
<li class="xn-title">Navigation</li>
<li class="xn-openable">
<span class="fa fa-dashboard"></span> <span class="xn-text">Dashboards</span>
<ul>
<!-- <li><span class="fa fa-desktop"></span> <span class="xn-text">General Dashboard</span></li> -->
<li><span class="fa fa-desktop"></span> <span class="xn-text">General Dashboard</span></li>
<li><span class="fa fa-desktop"></span> <span class="xn-text">My Dashboard</span></li>
</ul>
</li>
<li class="xn-openable">
<span class="fa fa-users"></span> <span class="xn-text"> Manage Users</span>
<ul>
<li><span class="fa fa-file"></span> <span class="xn-text">Users</span></li>
<li><span class="fa fa-file-text"></span> <span class="xn-text">Add New User</span></li>
<li><span class="fa fa-file-text-o"></span> <span class="xn-text">View Profile</span></li>
<li><span class="fa fa-file-text-o"></span> <span class="xn-text">Deactivated Users</span></li>
</ul>
</li>
<li class="xn-openable">
<span class="fa fa-files-o"></span> <span class="xn-text">Assessment</span>
<ul>
<li><span class="fa fa-file"></span> <span class="xn-text">Do My Assessment</span></li>
<li><span class="fa fa-file-text"></span> <span class="xn-text">Peer Assessment</span></li>
<li><span class="fa fa-file-text-o"></span> <span class="xn-text">Supervisorial Assessment</span></li>
</ul>
</li>
<li>
<span class="fa fa-folder-open"></span> <span class="xn-text">Manage Assessments</span>
</li>
</ul>
<!-- END X-NAVIGATION -->
</div>
<!-- END PAGE SIDEBAR -->
Can you check why does my sidebar aren't clickable?
Use element inspector... you might have some element (like a div, perhaps .page-content) over your side bar.
Is there a way to have the offcanvas offset my content without actually putting the entirety of my content inside it?
What I mean is, in order of the offcanvas to offset the main content this has to be inside the offcanvas inner-wrap div, however, with angular, this could be difficult to implement.
I'd rather not implement my IndexController inside the OffCanvasController and every other single piece of content.
Is there a way to get the Offcanvas to push the main content to the right as it would normally do, without the need to include said content inside the offcanvas?
I currently have an index.html, a header.html and an offcanvas.html, as follows:
header.html:
<div data-ng-include="'/public/system/views/offcanvas.html'"></div> <!-- This is where the offcanvas is included, before the main navigation -->
<div class="page-header" data-ng-controller="HeaderController">
<div class="desktop">
<ul class="title-area">
<li class="name">
<h1><a ui-sref="home" mean-token="'site-title'">SOL::S</a></h1>
</li>
</ul>
<section class="top-bar-section">
<ul class="left">
<li data-ng-repeat="item in menus.main" ui-route="/{{item.link}}" ng-class="{active: $uiRoute}">
<a mean-token="item.link" ui-sref='{{item.link}}'>{{item.title}}</a>
</li>
</ul>
<div class="account">
<div class="text-edit">
<div data-ng-show="global.authenticated" mean-token-editable></div>
</div>
<ul class="right" data-ng-hide="global.authenticated">
<li><a ui-sref='auth.register'>Register</a></li>
<li><a ui-sref='auth.login'>Login</a></li>
</ul>
<ul class="right" data-ng-show="global.authenticated">
<li class="has-dropdown">
{{global.user.name}}
<ul class="dropdown">
<li>Logout</li>
</ul>
</li>
</ul>
</div>
</section>
</div>
</div>
offcanvas.html
<div class="off-canvas-wrap mobile" data-ng-controller="offCanvasCtrl">
<div class="inner-wrap">
<nav class="tab-bar">
<section class="left-small">
<a class="left-off-canvas-toggle menu-icon" ><span></span></a>
</section>
<section class="middle tab-bar-section">
<h1 class="title">SOL ::</h1>
</section>
</nav>
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li>Left Sidebar</li>
<li>Left Sidebar</li>
<li>Left Sidebar</li>
</ul>
</aside>
<section class="main-section">
<div class="small-12 columns">
<h1>How to use</h1>
<p>Just use the standard layout for an offcanvas page as documented in the foundation docs</p>
<p>As long as you include mm.foundation.offcanvas it should simply work</p>
</div>
</section>
<a class="exit-off-canvas"></a>
</div>
</div>
And finally, index.html
<div class="container content" data-ng-controller="IndexController"> <!-- Main container and IndexController -->
<section> <!-- Site tag section -->
<div class="row"> <!-- Site tag row -->
<div class="small-12 columns">
<h1 mean-token="'home-default'">SOL :: Search</h1>
</div>
</div> <!-- End site tag row -->
</section> <!-- End site tag section -->
<section> <!-- Logo section -->
<div class="row"> <!-- Logo row -->
<div class="small-10 columns text-center logo-container small-offset-1"> <!-- Logo column -->
<a ui-sref="about" title="SOL"><img ng-src="{{logo}}" alt="SOL Logo"></a>
</div> <!-- End logo column -->
</div> <!-- End logo row -->
</section> <!-- End logo section -->
<section> <!-- Search input section -->
<div class="row"> <!-- Search row -->
<div class="small-8 columns small-offset-2"> <!-- Search column -->
<form>
<div class="row collapse"> <!-- Input group -->
<div class="large-9 columns">
<input type="text" placeholder="" class="form-control main-search-input">
</div>
<div class="small-3 columns">
Search
</div>
</div>
</form>
</div><!-- End input group -->
</div><!-- End search column -->
</div><!-- End search row -->
</section> <!-- End search input section -->
</div> <!-- End IndexController -->
The offcanvas.html is called in the first line of the header.html via a ng-include and the header.html itself is also called with a ng-include as an attribute of the nav element (which is in the index.html on the server side).
It all works wonderfully, except that, in order for the offcanvas to push the content to the right, I would need to include all the content inside this. I'd rather not do that, is there any other way?