My website's mobile site, (http://www.codesrce.com/thedrumcenter) has a very modern and functioning push menu. However, I am looking to make it more user friendly. Can someone please help me tweak my code so that when the user presses on the menu button the menu will open, and also when the user slides the screen to the right to open it, and then once it's open then they slide to the left to close it? Also, when the button is pressed, I would like it to turn to this color, #0099FF, and then when it is closed turn back to gray. Sorry if my wording isn't the best, but I hope you know what I mean. :) I will provide my code so far:
HTML
<div id="Mobile">
<div id="menu">
<ul>
<li>Top Brands</li>
<li>Drums</li>
<li>Hardware</li>
<li>Cymbals</li>
<li>Sticks</li>
<li>Drum Heads</li>
<li>Terms of Use</li>
<li>Affiliations</li>
</ul>
</div>
<div id="right">
<div id="Top">
<div id="menubar">
<a id="menubarheader">DrumCenter</a>
</div>
</div>
</div>
</div>
JQuery
$('#button').toggle(
function() {
$('#right').animate({ left: 275}, 'fast', function() {
$('#button');
});
},
function() {
$('#right').animate({ left: 0 }, 'fast', function() {
$('#button');
});
}
);
Any help would be appreciated, as I am a complete NOOB at Javascript and JQuery. Thank you!
Essentially there are different ways to go about this.. I inspected the CSS on your site to see how you were doing things but with 8 CSS's I gave up... too much to look at in the browser.
So.. essentially this question I believe was asked in
Swipe in the middle to open panel with jQuery Mobile?
and he gave a fiddle such http://fiddle.jshell.net/Palestinian/2B4Ht/
So I would implement that into your coding in some way. Have a top-fixed navbar that when collapsed will show your "push menu". Then just have the options if the the screen width is less than say 768pixels or something you can swipe left or right to open the pannels that will be menu's themselves..
Just my advice. I have never made a menu like the one you asked but I don't think it will be difficult.
Related
<div class="hamburger">
hamburger
</div>
Hey guys I'm trying to create a hamburger menu like the menu in this link that I provided. i have nothing only html. And I don't know hoe create this? You guys can help me I think. Did you find anything like this? Or can you tell me how to do this?
https://www.hugeinc.com/us
Basically, you'll have 2 elements there - the button ('H' on the link you provided), and the navigation - list of links, that is hidden by default. Clicking on the 'H' button would show the navigation menu (and change text from H to Huge, or whatever you want).
<style>
.hidden {
display:none;
}
</style>
<div class="hamburger">
H
</div>
<div class="navigation hidden">
Link 1
Link 2
Link 3
</div>
<script>
$('.hamburger').click(function(){
$('.navigation').toggleClass('hidden');
$(this).text()==='H'?$(this).text('Huge'):$(this).text('H');
});
</script>
That's the basic idea how it would work. You can adjust it to your needs and style it how you want it to look.
(I haven't tested it, so it may contain some syntax errors - but the idea stands).
I'm trying to make an entire website with all events triggered by scrolling. I just need help to achieve this effect :
I have a website with a few divs which fill all the viewport, I want the user to be able to scroll down to a named div and then when he keep scrolling the website stop scrolling vertically but the content of the div scroll horizontally. when it's done the website can scroll vertically again.
<body>
<header> </header>
<div class="scroll-vertical" id="tile1"></div>
<div class="scroll-vertical" id="tile2"></div>
<div class="scroll-vertical" id="tile3"></div>
<div class="scroll-horizontal" id="tile4">
<div class="horizontal" id="tile5"></div>
<div class="horizontal" id="tile5-a"></div>
<div class="horizontal" id="tile5-b"></div>
<div class="horizontal" id="tile5-c"></div>
</div>
<div class="scroll-vertical" id="tile6"></div>
<div class="scroll-vertical" id="tile7"></div>
<footer> </footer>
How to make that the website can only be scrolled from one div to the other ( full page)
I know there is a jquery plugin named fullpage.js which does that pretty well but as a student learning web development using plugins is not the best way to improve my skills.
Thanks for your help!
Cheers Simon
Why would you assume that ?
I doubt it can get much simpler than
$(document).ready(function() {
$('#fullpage').fullpage();
});
The author of the plugin also most likely already encountered, considered and had to solve a number of details and issues, cross-browser and non, that you have not yet had a chance to think about.
Edit :: animating divs:
$( "#bigasshorizontaldiv" ).animate({
left: "-=thewidthofoneviewport",
}, 5000, function() {
// Animation complete.
});
I have two "About" pages and would like to scroll left and right to each other when a link is clicked. This is my mark up.
<div id="about">
<div id="about-1">
<p>Content for about 1</p>
Slide to #about-2
</div>
<div id="about-2">
<p>Content for about 2</p>
Slide back to #about-1
</div>
</div>
I also made a visual representation on how I want it to be:
I am new to this and was hoping I'd get a simple CSS solution as much as possible because I don't know JS/Jquery but if it's the simpler way, so be it. I would also like it to be responsive if that's not too much to ask. :) Help, anyone? Thanks!
Have you thought about using JQuery UI?
Here is an example for you to have look at:
function transitionPage() {
// Hide to left / show from left
$("#about-1").toggle("slide", {direction: "left"}, 500);
// Show from right / hide to right
$("#about-2").toggle("slide", {direction: "right"}, 500);
}
$(document).ready(function() {
$('#about-1').click(transitionPage);
$('#about-2').click(transitionPage);
});
FIDDLE EXAMPLE
This is the question that I asked before but didn't get a problem-solving response. What's happening right now is that I am opening modal on the click of a panel. The modal opens with no problem but the problem occurs when I scroll to bottom and click a panel which moves to body scroll to top.
Here is the fiddle with the code.
Here is the panel code I am using:
<div class="panel">
<div class="panel-body" onclick="loadArticle('Metrico Release Date Announced', 'http://www.ign.com/articles/2014/07/16/metrico-release-date-announced')" data-toggle="modal" data-target=".bs-example-modal-lg">
<h4>Metrico Release Date Announced</h4>
<div class="news-item-background-image"></div>
<br>
<div class="article-info">
<p class="text-muted pull-left">
<img src="http://s1.wp.com/wp-content/themes/vip/techcrunch-2013/assets/images/favicon.ico" width="16px" height="16px">TechCrunch-1 hour ago</p><p class="text-muted pull-right category">Category</p>
</div>
<div class="clearfix"></div>
<p>Metrico will be released on August 5 in the US exclusively on PS Vita, according to an announcement on the PlayStation Blog. Digital Dreams also announced that Palmbomen, a Dutch synth composer who has been featured in games like GTA V worked with the studio to create the soundtrack for Metrico.</p>
</div>
<!--/span-->
</div>
In my CSS, I have added this:
body.modal-open {
overflow: visible !important;
position: fixed;
left: 0;
width: 100%;
}
And I know that this is the reason why is this happening because position:fixed with no top value I guess moves it top. If not this, then what should I do to fix the problem.
P.S the css above fixes the extra scrollbar issue that is also happening. So keep that in mind while answering. Just a tip! :)
So after a heck of time, figuring out the way to fix it, this is my workaround (inspired by the accepted answer here):
$('.bs-example-modal-lg').bind('hidden.bs.modal', function () {
$("html").css("overflow", "visible");
});
$('.bs-example-modal-lg').bind('show.bs.modal', function () {
$("html").css("overflow", "hidden");
});
The first bind regulates the event of modal when it hides and enables the scroll of whole page while the second one regulates the event when it shows up and disables the scroll of whole page.
Simple. :)
I'm sure this is a pretty common question around here but after lots of research I can't seem to find an answer to my question.
So just a little warning; I'm really new into javascript and jQuery etc.
To the question! I'm trying to apply two images (It's img's that looks like buttons :P) which you click on and it scrolls to the "next" paragraph or div.
So to get an overview of how it looks, here' a part of the HTML:
<div id="scrollbuttons">
<img id="prev" src="pics/prev.png"></img>
<img id="next" src="pics/next.png"></img>
</div>
Also:
<div id="work">
<p class="maintext">blabla</p>
</div>
<div id="gallery">
<p class="maintext">blabla</p>
</div>
<div id="project">
<p class="maintext">blabla</p>
</div>
<div id="finish">
<p class="maintext">blabla</p>
</div>
So what I'm trying to create is when you click on "next", the page should smoothly and automatically scroll to firstly, "work", then to "gallery" etc.
And when you press "prev", the page should again smoothly and automatically scroll back to the previous point.
I have the latest jQuery version and I'd like to not install plugins if it's not absolutely needed.
So I hope this is enough info to get some help, I'd really appreciate it since I'm really new to JS.
Thanks in advance
/Emil Nilsson
Here you go, this could probably be done a little more efficiently but it's dynamic and it works. Click the buttons to go forward and backward. FYI I added a mutual class called section to all of your content divs
JSFIDDLE
var Section = "start";
$("#next").click(function(){
if(Section == "start"){
var nextSection ="work";
}else{
var nextSection = $("#"+Section).next(".section").attr("id");
}
$("html, body").animate({scrollTop: $("#"+nextSection).offset().top});
Section = nextSection;
});
$("#prev").click(function(){
var nextSection = $("#"+Section).prev(".section").attr("id");
$("html, body").animate({scrollTop: $("#"+nextSection).offset().top});
Section = nextSection;
});
maybe you need something like this
http://jsfiddle.net/urUFK/
the img would be inside of the anchor like this (semantics and W3C validation):
<img id="prev" src="pics/prev.png"></img>
on my version you just need to define the first element and the div id's