I'm trying to implement this (http://www.hongkiat.com/blog/responsive-web-nav/) script for a responsive menu. I followed all the steps and used the proper code, but the menu won't open in a 320px screen width. Can anyone give me a heads up on how to fix this? FYI: I'm a newby in scripting.
Thanks a lot!
<?php
defined('_JEXEC') or die;
$doc = JFactory::getDocument();
$doc->addStyleSheet($this->baseurl . '/media/jui/css/bootstrap.min.css');
$doc->addStyleSheet($this->baseurl . '/media/jui/css/bootstrap-responsive.css');
$doc->addStyleSheet('templates/' . $this->template . '/css/style.css');
?>
<!DOCTYPE html>
<html>
<head>
<jdoc:include type="head" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="normalize.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function() {
var pull = $('#pull');
menu = $('nav ul');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function() {
var w = $(window).width();
if(w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});
</script>
</head>
<body>
<nav class='clearfix'>
<ul class='clearfix'>
<li>Sea PR?</li>
<li>Sea PR voor...</li>
<li> Press Relations</li>
<li>Copywriting</li>
<li>Websites</li>
<li>Contact</li>
</ul>
Menu
</nav>
</body>
</html>
you may want to remove this:
$(window).resize(function() {
var w = $(window).width();
if(w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
and replace it with
$(window).resize(function() {
if(menu.is(':hidden')) {
menu.removeAttr('style');
}
});
After go through the source of your demo site, it's turn out that you haven't included the nav.js file:
<script src="http://demo.hongkiat.com/_nav/js/nav.js" type="text/javascript"></script>
Related
I have a hard time incorporating a magnifying javascript plugin feature.
Basically, I was able to run this plugin on a static html template with static images. but I can't seem to run it at all on my django built website.
<!DOCTYPE html>
<html>
<head>
<title>Items</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" />
<title>EasyZoom, jQuery image zoom plugin</title>
<link rel="stylesheet" href="css/example.css" />
<link rel="stylesheet" href="css/pygments.css" />
<link rel="stylesheet" href="css/easyzoom.css" />
</head>
<body>
{%if entry.image_set.get.imgfile%}
<!-- images are extracted from the entry model -->
<div class="easyzoom easyzoom--overlay">
<a href="{{MEDIA_URL}} {{entry.image_set.get.imgfile.url}}">
<img src="{{MEDIA_URL}} {{entry.image_set.get.imgfile.url}}" alt="Green-SLI" />
</a>
</div>
{%endif%}
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="dist/easyzoom.js"></script>
<script>
// Instantiate EasyZoom instances
var $easyzoom = $('.easyzoom').easyZoom();
// Setup thumbnails example
var api1 = $easyzoom.filter('.easyzoom--with-thumbnails').data('easyZoom');
$('.thumbnails').on('click', 'a', function(e) {
var $this = $(this);
e.preventDefault();
// Use EasyZoom's `swap` method
api1.swap($this.data('standard'), $this.attr('href'));
});
// Setup toggles example
var api2 = $easyzoom.filter('.easyzoom--with-toggle').data('easyZoom');
$('.toggle').on('click', function() {
var $this = $(this);
if ($this.data("active") === true) {
$this.text("Switch on").data("active", false);
api2.teardown();
} else {
$this.text("Switch off").data("active", true);
api2._init();
}
});
</script>
</body>
</html>
My images are located inside entry model, and they are extracted from there. Does that have an impact on whether the magnify script will work or not? Since they are not exactly static.
Also, I have multiple css files, not sure if that impacts anything. I disabled the main css in the base template to see if it was interfering, but still nothing.
Is there a more efficient way that I incorporate a magnifying function? I have no experience really with javascript.
Here is the modified code that actually works.
> {% load staticfiles %}
>
> <!DOCTYPE html> <html> <head> <title>Items</title> <meta
> charset="utf-8" /> <meta http-equiv="X-UA-Compatible"
> content="IE=Edge;chrome=1" />
>
> <title>EasyZoom, jQuery image zoom plugin</title>
>
> <link rel="stylesheet" type = "text/css" href={% static "css/easyzoom.css" %} /> </head> <body> {%if
> entry.image_set.get.imgfile%}
>
>
> <div class="easyzoom easyzoom--overlay">
> <a href="{{MEDIA_URL}} {{entry.image_set.get.imgfile.url}}">
> <img src="{{MEDIA_URL}} {{entry.image_set.get.imgfile.url}}" alt="Green-SLI" width = '240' height ='180' />
> </a> </div> {%endif%}
>
>
>
> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
> <script type="text/javascript" src="{% static "css/easyzoom.js"
> %}"></script> <script> // Instantiate EasyZoom instances var
> $easyzoom = $('.easyzoom').easyZoom();
>
> // Setup thumbnails example var api1 =
> $easyzoom.filter('.easyzoom--with-thumbnails').data('easyZoom');
>
> $('.thumbnails').on('click', 'a', function(e) { var $this =
> $(this);
>
> e.preventDefault();
>
> // Use EasyZoom's `swap` method
> api1.swap($this.data('standard'), $this.attr('href')); });
>
> // Setup toggles example var api2 =
> $easyzoom.filter('.easyzoom--with-toggle').data('easyZoom');
>
> $('.toggle').on('click', function() { var $this = $(this);
>
> if ($this.data("active") === true) {
> $this.text("Switch on").data("active", false);
> api2.teardown(); } else {
> $this.text("Switch off").data("active", true);
> api2._init(); } }); </script> </body>
>
>
>
> </html>
I am by no means a web developer so forgive me if I am missing something blindly obvious. I was trying to add the scroll back to top button from this awesome guy to my static HTML site and it work perfectly when I am splitting into 2 parts to put into my <head>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<div class='thetop'></div>
and the rest into my <footer>
<div class='scrolltop'>
<div class='scroll icon'><i class="fa fa-4x fa-angle-up"></i></div>
</div>
<script>
$(window).scroll(function() {
if ($(this).scrollTop() > 50 ) {
$('.scrolltop:hidden').stop(true, true).fadeIn();
} else {
$('.scrolltop').stop(true, true).fadeOut();
}
});
$(function(){$(".scroll").click(function(){$("html,body").animate({scrollTop:$(".thetop").offset().top},"1000");return false})})
</script>
So when I am trying to implement this into my PHP, I still split this into 2 parts. One for the header.php and one footer.php, just like the static site but both my local and live site does not display anything. I am also added button css to my css file.
My header.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><?php bloginfo('title'); ?></title>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<div class='thetop'></div>
<?php wp_head(); ?>
</head>
My footer.php
<div class='scrolltop'>
<div class='scroll icon'><i class="fa fa-4x fa-angle-up"></i></div>
</div>
<script>
$(window).scroll(function() {
if ($(this).scrollTop() > 50 ) {
$('.scrolltop:hidden').stop(true, true).fadeIn();
} else {
$('.scrolltop').stop(true, true).fadeOut();
}
});
$(function(){$(".scroll").click(function(){$("html,body").animate({scrollTop:$(".thetop").offset().top},"1000");return false})})
</script>
<?php wp_footer(); ?>
</div>
</body>
</html>
Then I am thinking about adding both of them to my index.php and remove them from header.php and footer.php but it still does not working.
Any pointers would be appreciated.
Put the <div class='thetop'></div> after the <head> inside body
You should do such things after jQuery and the document are ready.
$(document).ready(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 50) {
$('.scrolltop:hidden').stop(true, true).fadeIn();
} else {
$('.scrolltop').stop(true, true).fadeOut();
}
});
$(function() {
$(".scroll").click(function() {
$("html,body").animate({
scrollTop: $(".thetop").offset().top
}, "1000");
return false
})
})
});
I tried to change the width of div dynamically while scrolling.But it is not working.I have jquery-1.11.3.min.js in my directory and connect it with HTML file.The scrollfunction in my script appears in brown color instead of black.
This is my HTML file
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="jquery-1.11.3.min.js"></script>
<link rel="stylesheet" href="BooksExchanger.css"/>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<script src="BooksExchanger.js"></script>
<div id="packet"style="position:fixed">
<h1 id="welcome" >Welcome</p>
<h2 id="about">You Are Now Entering Into BBE</h2>
</div>
<img src="1.jpg"/>
<img src="2.jpg"/>
</body>
</html>
THis is my JS file(BooksExchanger.js)
$(document).ready(function(){
var scroll_pos = 0;
$(document).scroll(function() {
scroll_pos = $(this).scrollTop();
if(scroll_pos < 10 ) {
$("#welcome").css('width', 75);
} else if(scroll_pos > 25 && scroll_pos < 75) {
$("#welcome").css('width', 100);
} else if(scroll_pos > 75 && scroll_pos < 100){
$("#welcome").css('width', 125);
}else if(scroll_pos > 100){
$("#welcome").css('width', 150);
}
});
});
try adding the scroll event to $(window) instead of $(document)
FIX: I linked to the wrong script, very sorry for this.
I have my script file linked correctly (at least I think so). Here's the link:
<script type="text/javascript" src="assets/js/menu.js"></script>
This link is right before the closing body tag. I have tried placing this link in the head section but that doesn't help.
Here is the JS code that's in that script file:
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
My HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>title</title>
<link rel="stylesheet" href="assets/css/main.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
-Content-
<script type="text/javascript" src="assets/js/menu.js"></script>
</body>
This script is for my push right menu on my website.
Any help, thanks! :D
UPDATE: I have added an alert into the script and that works but my menu still doesn't work?
Menu HTML:
<nav id="menu">
<ul>
<li>Contact</li>
<li>About Us</li>
<li>Blog</li>
<li>Home</li>
</ul>
</nav>
different browsers handle events differently. this is why you should use jQuery because it takes care of all the differences for you. This function should do it for you in plain JS..
function on(elem,eventType,handler){
if (elem.addEventListener){
elem.addEventListener (eventType,handler,false);
}else if (elem.attachEvent){
elem.attachEvent ('on'+eventType,handler);
}
}
on(window, "click", function(e){
// .. do stuff
});
I have an error in my javascript only when I run it locally, but when I run it on jsfiddle it works fine.
Javascript
var pos, scrollY,
$el = $('nav'),
navItems = $el.find('> span'),
menuHeight = $el[0].clientHeight,
sections = $('section').toArray(), // cache elements
pointOfAttachment = $el[0].getBoundingClientRect().top;
// Bind events
$(window).on('scroll.nav', updateNav)
.on('resize.nav', updateNav);
function updateNav(){
scrollY = window.pageYOffset || document.documentElement.scrollTop;
for( var i = sections.length; i--; ){
if( sections[i].getBoundingClientRect().top - menuHeight < 0 ){
navItems.filter('.' + sections[i].id).addClass('active').siblings().removeClass('active');
break;
}
navItems.removeClass('active');
}
if( scrollY > pointOfAttachment )
$el.addClass('fixed');
else
$el.removeClass('fixed');
}
// for initial page load
updateNav();
$("nav span").click(function() {
var sectionId = $(this).attr('class')
$('html, body').animate({
scrollTop: ($('#'+sectionId).offset().top - $('nav').height()) + 1
}, 300);
});
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript">
</script>
<script src="script.js" type="text/javascript">
</script>
<title></title>
</head>
<body>
<header>Header</header>
<nav>
<span class='a1'>Section 1</span>
<span class='a2'>Section 2</span>
<span class='a3'>Section 3</span>
</nav>
<div id='navPlaceholder'></div>
<section id='a1'>Some section..</section>
<section id='a2'>Another Section</section>
<section id='a3'>And another one</section>
</body>
</html>
When I run it on JSfiddle it works fine but when I run it locally I get the javascript error:
Uncaught TypeError: Cannot read property 'clientHeight' of undefined
Can anyone tell me why this would only happen locally, and how I can fix it please?
You should include script once DOM is ready:
<script src="script.js" type="text/javascript">
</body>
For example here, just before </body> closing tag