It sounds so simple but none of what I could find on google worked so far. I've found a similar question on here with a solution that looks exactly like what I'm looking for: http://jsfiddle.net/sJ6Bj/4/
Here's the HTML:
<html>
<head>
<title>Two-pane navigation</title>
</head>
<body>
<div id="content">
<div id="navigation">
<h1>Navigation</h1>
<ul>
<li>Page 1</li>
<li>Page 2</li>
</ul>
</div>
<div id="pages">
<div id="page1" class="page">
<h1>Page 1</h1>
<p>This is all the lovely content on page 1.</p>
<p>Let's add a bunch of stuff to make it scroll.</p>
<p style="font-size: 72px">.<br/>.<br/>.<br/>.<br/>.<br/>.</p>
<p>This is at the bottom of the page.</p>
</div>
<div id="page2" class="page">
<h1>Page 2</h1>
<p>This is all the lovely content on page 2.</p>
</div>
</div>
</div>
</body>
</html>
JavaScript (assumes JQuery is loaded):
$(document).ready(function() {
$(".page-link").on("click", function(e) {
$(".page").fadeOut(250);
setTimeout(function() { $($(e.currentTarget).attr("href")).fadeIn(250); }, 250);
});
});
CSS:
#navigation {
position: fixed;
width: 250px;
height: 100%;
border-right: 1px solid black;
}
#pages {
margin-left: 270px; /* 250px + 20px of actual margin */
}
.page {
position: relative;
display: none;
overflow: scroll;
}
The only problem is, I want to load different Youtube videos with autoplay. Which means that with the given example you already hear all of the audio play in the back. To make sure this doesnt happen I want to load different, seperate html files containing the youtube videos.
Thanx in advance.
Ideally you should load your pages via AJAX. That would solve the problem of Youtube content playing in the background. And drastically reduce initial page load time.
HTML
<html>
<head>
<title>Two-pane navigation</title>
</head>
<body>
<div id="content">
<div id="navigation">
<h1>Navigation</h1>
<ul>
<li>Page 1</li>
<li>Page 2</li>
</ul>
</div>
<div id="pages">
<!-- ajax content loads here -->
</div>
</div>
</body>
</html>
Javascript/jQuery
$(document).ready(function() {
$(".page-link").on("click", function(e) {
$.get($(this).attr('href'))
.done(function(data) {
$('#pages').html(data);
});
return false;
});
});
Related
I have a page that has a nav bar and aside as in below url: https://imgur.com/Nc2QuRv
When I click on the first item in the nav bar which is an image, I want the aside to fadeout or if it is already fade out, I want it to fade in. I am just trying fade out for now using jquery but the event does not seem to do anything.
I tried using class, id, child, find functions in jquery. none of it seem to help
Here is my code:
html
<head>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="js/action-bar.js"></script>
</head>
<html>
<body>
<header class=header>
</header>
<nav class=navigation-bar>
<img id="menu-img" class="nav-action-image" src="menu_icon.png"/>
<a class="active" href="#Summary">Summary</a>
Preferences
</nav>
<aside class="action-block">
<div class="action-block-element-main">Some text</div>
</aside>
</body>
</html>
jquery
$(function(){
$(".navigation-bar").find("#menu-img").click(function() {
$(".action-block").fadeOut(3000));
});
});
When I click on the first item in the nav bar which is an image, I want the aside bar below it to fade out. what am i doing wrong here?
You can just use the fadeToggle method to toggel back and forth. It's not necessary to use find - just target the image. Your img had an empty href which was causing the click to leave the page.
$(document).ready(function() {
$("#menu-img").click(function() {
$(".action-block").fadeToggle(3000);
});
});
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<nav class="navigation-bar">
<img id="menu-img" class="nav-action-image" src="https://picsum.photos/50" />
<a class="active" href="#Summary">Summary</a>
Preferences
</nav>
<aside class="action-block">
<div class="action-block-element-main">Some text</div>
</aside>
(function() {
$('#menu-img').on('click', function() {
$(".action-block").fadeOut(3000);
});
})($);
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<nav class="navigation-bar">
<img class="nav-action-image" id="menu-img" src="menu_icon.png">
<a class="active" href="#Summary">Summary</a>
Preferences
</nav>
<aside class="action-block">
<div class="action-block-element-main">
Some text
</div>
</aside>
I tried my best to implement a drop down menu as facebook and twitter does for their statuses but couldn't get the way. I did a lot of search but find no way.
Here is my Markup:
<div class="drop">
Menu
<div class="down">
<ul>
<li>Edit</li>
<li>Delete</li>
</ul>
</div>
<!-- Post here !-->
</div>
<div class="drop" id="1">
Menu
<div class="down" data-url='1'>
<ul>
<li>Edit</li>
<li>Delete</li>
</ul>
</div>
<!-- Post here !-->
</div>
<div class="drop">
Menu
<div class="down">
<ul>
<li>Edit</li>
<li>Delete</li>
</ul>
</div>
<!-- Post here !-->
</div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="js.js"></script>
<script type="text/javascript">
$('.drop').drop();
</script>
<style type="text/css">
.drop{
display: inline-block;
padding: 5px;
background-color: #ddd;
margin: 20px;
cursor: pointer;
}
.down{
display: none;
}
</style>
I am using jQuery and here is the module:js.js
(function($){
$.fn.drop = function(){
this.each(function(){
var self = $(this);
self.on('click', function(){
$('.down').css('display', 'block');
});
});
}
})(jQuery);
With this code when I click on any of the .drop element all of the .down elements are displayed.
Sorry for any typos.
Every suggestion will be appreciated.
In script your selector is .down So, it will apply to all .down class
Try to catch just child like this
(function($){
$.fn.drop = function(){
this.each(function(){
var self = $(this);
self.on('click', function(){
self.find('.down').css('display', 'block');
});
});
}
})(jQuery);
I hope this will help you for now and in future.
Does anybody know how to set up Snap.js in jQuery Mobile? I'm trying to migrate from the jQuery Mobile panel widget which has major scroll issues.
http://jsfiddle.net/frank_o/vZBzD/3/
HTML:
<div data-role="page">
<header data-role="header" data-position="fixed" data-tap-toggle="false">
<a id="open-panel">Open panel</a>
<div class="snap-drawers">
<div class="snap-drawer snap-drawer-left">
<ul>
<li>Pretty row 1</li>
<li>Pretty row 2</li>
<li>...</li>
</ul>
</div>
</div>
</header>
<div data-role="content" id="content" class="snap-content">
<ul>
<li>Pretty row 1</li>
<li>Pretty row 2</li>
<li>...</li>
</ul>
</div>
</div>
JS:
$(document).on('pagecontainershow', function () {
var snapper = new Snap({
element: document.getElementById('content')
});
if (document.getElementById('open-panel')) {
addEvent(document.getElementById('open-panel'), 'click', function () {
snapper.open('left');
});
}
});
I don't understand what's the problem? You had a JavaScript error with click event binding, I just changed it to jQuery like binding.
Working example: http://jsfiddle.net/Gajotres/as8P4/
$(document).on('pagecontainershow', function () {
var snapper = new Snap({
element: document.getElementById('content')
});
$(document).on('click', '#open-panel',function () {
snapper.open('left');
});
});
As per snap js, you don't need to place the snap js html content inside the jQuery mobile page content html.
You can break the page in two parts cleanly, the snap nav section & the actual jQuery mobile html structure.
Working Demo
http://codepen.io/nitishdhar/pen/pIJkr
I have used jQuery + jQuery Mobile 1.4.2(JS) + jQuery Mobile 1.4.2(CSS) + Snap JS + Snap CSS as resources in the codepen, you can check them in specific JS & CSS sections settings button.
Code Structure - Different Menu on Both Sides
<body>
<!-- Snap Js Code Comes Here -->
<div class="snap-drawers">
<div class="snap-drawer snap-drawer-left">
<div>
<ul>
<li>Default</li>
<li>No Drag</li>
<li>Drag Element</li>
<li>Right Disabled</li>
<li>Hyperextension Disabled</li>
</ul>
</div>
</div>
<div class="snap-drawer snap-drawer-right">
<ul>
<li>Default</li>
<li>No Drag</li>
<li>Drag Element</li>
<li>Right Disabled</li>
</ul>
</div>
</div>
<!-- Snap Js Code Ends Here -->
<!-- Jquery Mobile Code Comes Here -->
<div data-role="page" id="content">
<div data-role="header" data-position="fixed">
<h4>© Test App</h4>
</div>
<div role="main" class="ui-content">
Some Page Content
</div>
<div data-role="footer" data-position="fixed">
<h4>© Test App</h4>
</div>
</div>
</body>
Now apply some CSS as per your requirement of design, but you might need the z-index -
#content {
background: #BFC7D8;
z-index: 1;
}
Now initiate the snap nav -
var snapper = new Snap({
element: document.getElementById('content')
});
This should work fine now.
Alternate Example with same Menu on both sides
Also, if you want to show the same menu on both sides, just remove the menu items from the snap-drawer-right div & only keep menu items in the left one like this -
<div class="snap-drawer snap-drawer-left">
<div>
<ul>
<li>Default</li>
<li>No Drag</li>
<li>Drag Element</li>
<li>Right Disabled</li>
<li>Hyperextension Disabled</li>
</ul>
</div>
</div>
<div class="snap-drawer snap-drawer-right"></div>
Now Add this to your CSS -
/* Show "Left" drawer for the "Right" drawer in the demo */
.snapjs-right .snap-drawer-left {
display: block;
right: 0;
left: auto;
}
/* Hide the actual "Right" drawer in the demo */
.snapjs-right .snap-drawer-right {
display: none;
}
Working Demo - http://codepen.io/nitishdhar/pen/LliBa
I am trying to put a layout together with jquery-ui-layout and can't overcome the height problem.
Here's the HTML code:
<body>
<div id="wrapper">
<div id="header">
<a class="logo" href="/">
<img src="/media/bdo.png" width="154" height="38"/>
</a>
<ul class="top-menu">
<li>report fill out</li>
<li>browse reports</li>
</ul>
<div class="user">
hi there
</div>
</div>
<div id="content">
<div class="ui-layout-west" id="consultants">west</div>
<div class="ui-layout-center" id="contacts">center</div>
<div class="ui-layout-east" id="details">east</div>
</div>
</div>
<div id="footer">
<ul class="links">
<li>help</li>
<li>report an issue</li>
</ul>
</div>
</body>
There is styles.css I use for all the pages (it's rather large to past into here).
The javascript I use for this is rather simple, too:
<script type="text/javascript">
$(document).ready(function(){
myLayout = $("#content").layout({
applyDefaultStyles: true
});
myLayout.sizePane('west',500);
});
</script>
But the output is that all three panels are so short as per the screenshot below. How can I fix the height of the layout to fit the whole page and go all the way down to the footer?
The layout manager will use the size of the container to determine it's layout logic. In this case you have not specified any height for the content div <div id="content">...</div>. Just as a quick example change your css like so:
#content {
float: left;
clear: both;
width: 100%;
height: 500px;
padding: 10px 0 20px;
}
If you want to have the content fill the space between your header and footer you should use two layouts one for north (header), centre (content), south (footer) and again in your content you apply a second layout for your west, centre, east panels.
I am using the idTabs plugin for jQuery on my new site. However, when I try to select a specific tab via the url, say http://crnaz.com/a/about/#staff on page load or via tab navigation, the page anchors to the div #staff instead of page top.
Is there a way to keep the page anchored to the top on url change?
Here's the code (or you can view the source of the page http://crnaz.com/a/about/index.php). Thanks in advance for the help! :
<script type="text/javascript">
var start = location.hash;
start = start?start.substr(1):0;
$(".usual").tabs(true,start);
<div class="usual">
<ul>
<li>Values</li>
<li>Theology</li>
<li>Nazarene</li>
<li>Staff</li>
<li>Contact Us</li>
</ul>
<div id="content-wrapper">
<div id="values" style="display: block; ">Tab Content</div>
<div id="theology" style="display: block; ">Tab Content</div>
<div id="nazarene" style="display: block; ">Tab Content</div>
<div id="staff" style="display: block; ">Tab Content</div>
<div id="contact" style="display: block; ">Tab Content</div>
</div>
As you are using jQuery, you might try to trigger
$("html").scrollTop();
after pageload.