JPanelMenu does not create the JPanelMenu-Menu class - javascript

The JpanelMenu will not create the additional class and I can't figure out why.
I placed linked to the site with this HEAD
<script type="text/javascript" src="http://jpanelmenu.com/js/lib/jquery.jpanelmenu.min.js"></script>
I then placed the script to enable the sidebar directly underneath it in the HEAD
<script type="text/javascript">
$(document).ready(function () {
var jPM = $.jPanelMenu();
jPM.on();
});
</script>
I then placed the code for the nav within the HEADER
<a class="menu-trigger" href="#menu">Click Me</a>
<ul id="menu" style="display: none;">
<li>Overview</li>
<li>Usage</li>
<li>About</li>
</ul>
But then when I run the page inspector, the "click me" works and opens but the sidebar is empty. It will NOT create the following class:
<ul id="jPanelMenu-menu" style="width: 250px; display: block; z-index: 1;">...</ul>
I think there may be something wrong within my CSS but I do not have any elements created for JPanel Menu but I do have a left and right panel within the body like so:
body {
height: 100%;
max-width: 100%;
min-width: 960px;
min-height: 600px;}
right-panel, .left-panel {
height: 100%;
min-height: 600px;}
.left-panel {
background: url('Images/side-bar-parchment.png') no-repeat fixed center;
background-size: cover;
position: absolute;
width: 170px;
z-index: 1;}
.right-panel {
margin-left: 170px;
max-width: 100%;
z-index: 1;}

write a div in last of html or before html with same id.
1. Jpanelmenu should create it automatically but it does not.
<div id="jPanelMenu-menu"/> this will work.
and might be your html element is not enclosed properly.

Figured it out! I am not exactly sure how it got fixed but I decided to update the jQuery package to 2.0 from 1.8 and now it works! Thank you everyone!

Related

preloader not working online

I am using a preloader for my website. I simply designed it using CSS and coded the logic to hide the preloader when the website gets completely loaded.
The whole thing works on my local machine but when i put it online it doesn't work.
This is the link to the website : http://deepanshubatra.tk (Use google chrome please)
I am mentioning the HTML,CSS and javascript code:
CSS:
div#preloader { position: fixed; left: 0; top: 0; z-index: 999; width: 100%; height: 100%; overflow: visible; background: #333 url('http://files.mimoymima.com/images/loading.gif') no-repeat center center; }
Javascript
<script >
jQuery(document).ready(function($) {
// site preloader -- also uncomment the div in the header and the css style for #preloader
$(window).load(function(){
$('#preloader').fadeOut('slow',function(){$(this).remove();});
});
});
</script>
HTML
<div id="preloader"></div>
You have error in console:
Uncaught ReferenceError: jQuery is not defined
Add <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> to your head tag.
The error that is in the console on the page is jQuery is not defined. So you need to load jQuery in your scripts. Here is how you can use it with CDN:
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
You can try this code.
Add HTML inside the body.
<div class="se-pre-con">
<img src="../images/logo-02.svg">
</div>
Add this CSS Code:
.se-pre-con {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: #000;
margin: 0 auto;
text-align: center;
}
div.se-pre-con img{
max-width: 300px;
top: 20%;
position: relative;
}
div.se-pre-con.highlighted{
display:none;
}
And this jQuery code in the footer:
<script>
jQuery(function() {
jQuery(this).addClass('highlighted');
setTimeout(function () {
jQuery('.se-pre-con').addClass('highlighted');
}, 2000);});
</script>

Javascript Animation Positioning and Scaling issue

So I'm currently working on a single screen which has multiple content views which will be accessed from a button to the side of the dynamic area. I found this repo (https://github.com/ian-de-vries/Multi-Screen.js) which achieves something very similar to what I want, only it expects a full screen, as opposed to just a certain area. So far, I've got it very close to performing as I would hope, but the last couple of hours have had me stumped. Currently there are two issues:
1) The relative divs use the % width value of their containing div, while the animation of the divs uses a % width of the entire screen, making the animated divs larger. I think the way around this is to calculate the fixed width during the animation then remove it post animation. If you set a fixed width in the css (which isn't appropriate for the site) the animation is smooth and has the correct width whilst animating, but then leads to the next issue.
2) Because of the original functionality of the js, the animations come straight down the centre, which again adds to a worse animation because of the offset content.
While I've tried to solve both of these issues, JS is beyond me despite the experience I have in other programming languages. I thought I was onto something when editing the pre/post/animation_css variables, but I couldn't get what I wanted to achieve. Anyway, below is a quick dummy site which replicates the code on the actual site well, and creates the same issues. To get this working, put these two files in a folder with the multi-screen.js file from the repo.
<!DOCTYPE html>
<html>
<head>
<!-- Scrolling Pages -->
<!-- latest jQuery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<!-- link the css and js scripts -->
<link href="style.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="multi-screen.js"></script>
<!-- run the plugin -->
<script type="text/javascript">$(document).ready(function() { MultiScreen.init(); });</script>
</head>
<body>
<div class="wrapper">
<div class="header">My Header</div>
<div class="contentarea">
<div style="float:left; width: 20%; background-color: red; height: 500pt;"></div>
<div style="width:80%; float: right; height: 600pt; background-color: grey;">
<div id="entry_screen" class="ms-container ms-default" style="">
go down<br>
go down 2
</div>
<div id="screen2" class="ms-container" style="">
go up<br>
go down
</div>
<div id="screen3" class="ms-container" style="">
go up<br>
go up 2
</div>
</div>
</div><!---------- Close "content-area" --------->
</div><!---------- Close "wrapper" --------->
</body>
</html>
CSS:
.ms-container {
position: fixed;
z-index: 1;
display: none;
}
.ms-default {
position: absolute;
z-index: 2;
display: block;
}
#entry_screen {
height: 500pt;
width: 80%;
background-color: green;
left: 0;
margin-left: 20%;
}
#screen2 {
height: 500pt;
width: 80%;
//float: right;
background-color: blue;
//margin-right: 10%;
margin-left: 20%;
}
#screen3 {
height: 500pt;
width: 80%;
background-color: magenta;
margin-left: 20%;
}
.wrapper {
min-height: 100%;
padding: 0 10% 0 10%;
height: auto !important;
height: 100%;
margin: 0 auto 0pt;
}
.contentarea {
position: relative;
}
.header {
text-align: center;
width: 100%;
height: 50pt;
}
a {
color: white;
}
Ended up using another alternative. The one I chose was fullPage.js. It can be used for the desired functionally despite being for full screen sites. Hope this helps anyone who wanted to achieve something similar.

Slide out description after clicking image in gallery

I'm trying to make animation when opening image kinda like is here: http://arzbhatia.com/ in portfolio section.
This is what I've already done, but it's not working properly.
Here is jFiddle of what I've done: jFiddle
The div is showing in the same place, no matter which image I click. If I remove position:absoulte from #test_div it seem to add div after image, moving rest of them to the bottom.
I did change your fiddle, and created rows. Try it like this:
http://fiddle.jshell.net/MYXcf/4/
You have to put another div named description into all you li.
Like this :
<div id="gallery">
<ul>
<li class="image_item">
<img class="gal_images" src="http://goo.gl/rpys4M">
<div class="description"></div>
</li>
<li class="image_item">
<img class="gal_images" src="http://goo.gl/rpys4M">
<div class="description"></div>
</li>
<li class="image_item">
<img class="gal_images" src="http://goo.gl/rpys4M">
<div class="description"></div>
</li>
<li class="image_item">
<img class="gal_images" src="http://goo.gl/rpys4M">
<div class="description"></div>
</li>
</ul>
</div>
And some css to style this up :
ul {
list-style-type: none;
}
#gallery {
height: 500px;
margin: 0 auto;
width: 500px;
margin-top: 100px;
}
.click_images {
vertical-align: top;
display: block;
position: relative;
}
.gal_images {
height: 220px;
width: 220px;
float: left;
font-size: 40px;
color: #fff;
margin: 5px;
}
.image_item {
width: 220px;
float: left;
}
#test_div {
position: absolute;
top: auto;
height: 200px;
width:100%;
background: #000;
overflow: hidden;
}
.description {
display: none;
}
And the jQuery, will toggle if the description is already opened or not, if its opened, it'll hide, else it'll open.
var opened = false;
$('.image_item').click(function () {
if (!opened) {
opened = true;
$(this).find('.description').slideDown('500').append('hahaha');
} else {
opened = false;
$(this).find('.description').slideUp('500');
}
});
You'll find a fiddle here: http://jsfiddle.net/fm9L4/
The div is in the same place because the images are being floated out of their parent (the LI). This is visible in the Chrome Dev Tools if you hover over the list elements.
The fix is to not float anything and to make the LIs display:inline-block so that they occupy space in the dom. You also need to add some Javascript to increase the height of the LI to accommodate #test_div when it gets added because it's positioning is absolute.
Full code here: http://fiddle.jshell.net/MYXcf/3/
Updated code here: http://fiddle.jshell.net/MYXcf/5/

Fixed positioning overlap issue

I am in a corner with this one. I have a layout with 2 containers. One of the containers represents a map (#main) and needs to stay in user view at all times, the other one (#sub) serves as a scroll-able content. Everything looks fine if content fits horizontally. However as soon as the horizontal bar appears (resize the window to replicate), the scroll-able content overlaps the fixed content and I am out of ideas how to fix it. I know of one way to fix it by positioning the fixed content absolutely instead and useing javascript to adjust its position from the top. Is there any way to fix it?
Sample code is below:
Html:
<div id="content">
<div id="main">main</div>
<div id="sub">
<strong>Sub</strong><br />
sub<br />
sub<br />
sub
</div>
</div>
Css:
#content {
width: 1200px;
margin: 0 auto;
}
#main {
position: fixed;
width: 849px;
height: 500px;
background: red;
}
#sub {
position: relative;
float: right;
width: 350px;
height: 3500px;
background: green;
}
JSFiddle link
Based on your comments it sounds like not allowing the user to scroll will solve the issue:
body {
padding: 0;
margin: 0;
overflow-x:hidden;
}
If you want them both to scroll you have to remove the fixed positioning:
#main {
position: relative;
width: 849px;
height: 300px;
background: red;
font-size: 50px;
text-align: center;
padding-top: 200px;
float:left;
}

$(window).load Strange Behavior on Refresh

I have a loading mask that I would like to fadeOut() once the entire page has loaded. It works perfectly on the first time the user enters the page, but if they refresh, the loading mask disappears before the page has loaded. I have read quite a few articles out there and it seems that the common problem is that $(window)load usually doesn't fire events because of cache, but in my case it is fired too quickly upon refresh...What could be the issue?
1. <html>
2. <head><script type="text/javascript">
3. Ext.onReady(function() {....});
4. $(window).load(function(){$('#loading-mask').fadeOut(5000); $('#loading').fadeOut(5000);});
5. </script></head>
6. <body>
7. <div id="loading-mask"></div>
8. <div id="loading">
9. <span id="loading-message">Loading Tibet...</span>
10. </div>
11. </body>
12. </html>
Any help or guidance would be greatly appreciated :)
Thanks,
elshae
Ok so I found out that it's best if JavaScript code is placed in the body..
So now I have all my code in the body including the Ext.onReady, so here goes...
<html>
<head></head>
<body onload="">
<div id="loading-mask"></div>
<div id="loading">
<span id="loading-message">Loading Tibet...</span>
</div>
<script type="text/javascript">
//Default blank image needed for some ExtJS widgets/if no image is found...
Ext.BLANK_IMAGE_URL = "./ext-3.2.1/resources/images/default/s.gif";
Ext.onReady(function() {
.............
});
//Outside Ext.onReady
window.onload = function(){$('#loading-mask').fadeOut(5000); $('#loading').fadeOut(5000);}
</body></html>
//The css is:
#loading-mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/*background: #D8D8D8;*/
/* background: #6E6E6E;*/
background: #000000;
opacity: .8;
z-index: 1;
}
#loading {
position: absolute;
top: 40%;
left: 45%;
z-index: 2;
}
#loading span {
/*background: url('ajax-loader.gif') no-repeat left center;*/
background: url('globe.gif') no-repeat left center;
color: #BDBDBD;
width: 60%;
height: 30%;
padding: 60px 70px;
display: block;
}

Categories