I'm creating a website with horizontal scrolling. I'm using this jQuery plugin for automatic scrolling. Below is the code.
HTML
<head>
<link type="text/css" rel="stylesheet" href="stylesheets/styles.css" />
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="container">
<div id="navigation">
<ul>
<li>
<div class="menubutton" id="homeLink"><a class="menuitem" href="#"></a></div>
</li>
<li>
<div class="menubutton" id="aboutLink"><a class="menuitem" href="#"></a></div>
</li>
<li>
<div class="menubutton" id="musicLink"><a class="menuitem" href="#"></a></div>
</li>
</ul>
</div><!-- end of navigation -->
<div id="firstMark"></div>
<div id="secondMark"></div>
<div id="thirdMark"></div>
</div>
</body>
</html>
CSS
#charset "utf-8";
ul li { list-style-type:none; }
/* navigation */
#navigation { position:fixed; z-index:5; bottom:80px; left:-26px; background-color:#FFF; width:70px; height:190px; border-top-right-radius:10px; border-bottom-right-radius:10px; }
.menubutton { float:left; width:20px; height:20px; border-radius: 50%; background-color:#F00; margin-bottom:15px; }
.menubutton:hover { cursor:pointer; }
#homeLink { background-color:#007FD2; }
#aboutLink { background-color:#C7007A; }
#musicLink { background-color:#FFDB1A; }
#brandsLink { background-color:#000; }
#contactLink { background-color:#F90; }
#homeLink:hover { background-color:#006DB4; }
#aboutLink:hover { background-color:#99005E; }
#musicLink:hover { background-color:#FFC61A; }
#brandsLink:hover { background-color:#333; }
#contactLink:hover { background-color:#F60; }
#container {
position:absolute;
width:10000px;
height:100%;
background-color:#FFC;
top:0;
left:0;
}
#firstMark {
position:absolute;
width:1px;
height:1px;
left:3000px;
}
#secondMark {
position:absolute;
width:1px;
height:1px;
left:6000px;
}
#thirdMark {
position:absolute;
width:1px;
height:1px;
left:9000px;
}
JavaScript
$(document).ready(function(e) {
$('#homeLink').click(function(e) {
e.preventDefault();
$.scrollTo(0,0, {duration: 2000});
});
$('#aboutLink').click(function(e) {
e.preventDefault();
$.scrollTo('#firstMark', {duration: 2000});
});
$('#musicLink').click(function(e) {
e.preventDefault();
$.scrollTo('#secondMark', {duration: 2000});
});
});
Here's the link to a demo page. This works in Firefox(v18), Opera(v12), Safari(v5.1.2) and even Internet Explorer 9 but it doesn't work in Chrome(v24).
Can anybody tell me what's missing here? It it something wrong with my code or a bug in the plugin?
Failing that, please tell me if there are any other alternatives to automatic scrolling which also supports horizontal scrolling.
Thank you.
Old question but I'll write down my experience.
I had the same issue with that plugin downloaded from http://flesler.blogspot.com/2007/10/jqueryscrollto.html
That plugin in the article is outdated, you can download the latest version here: https://github.com/flesler
Also you will also have to change
$.scrollTo(0,0, {duration: 2000});
to
$.scrollTo("0px","0px", {duration: 2000});
Your anchor might be receiving the click event rather than the div.
Just give this a quick try:
$('#homeLink a').click(function(e) {
e.preventDefault();
alert('click');
$.scrollTo(0,0, {duration: 2000});
});
I added an alert('click') as well so you can tell if it's been detected.
Try using px will scroll value
Change
$.scrollTo(0,0, {duration: 2000});
to
$.scrollTo(0px,0px, {duration: 2000});
The bug is in webkit's ability to animate the body. Instead, create a div just inside body and apply the animation to this instead...
<body>
<div class="wrapper">
<nav>
<a class="scroll-to-id" href="#" data-target="section1">Section 1</a>
<a class="scroll-to-id" href="#" data-target="section2">Section 2</a>
</nav>
<section>
<a id="section1"> </a>
<p>Some content<p>
</section>
<section>
<a id="section2"> </a>
<p>Some more content<p>
</section>
</div>
</body>
Note: In my personal experience, the ID could be just as effectively applied to the tag instead of a redundant and this still work ... I've only done it this way in this example because some users noted issues with targeting IDs higher up the DOM tree than this ... I couldn't personally recreate that problem, so hey, either way works!
Then style the wrapper element and body to behave correctly
body { position:relative; }
.wrapper { overflow:auto; position:absolute; top:0; height:100%; width:100%; }
Then the jQuery
$('.scroll-to-id').on('click', function(event) {
event.preventDefault();
var target = "#" + $(this).data('target');
$('.wrapper').animate({
scrollTop: $(target).offset().top
}, 1500);
});
Related
I would like to get my page to display the current tab in the URL, please keep in mind I'm still learning, so my coding skills are not the greatest. I would normally use PHP for this, but I've been asked to stick to Javascript/JQuery.
So far, I've managed to get my tabs to display content dynamically within a div by using a simple script.
This is my index bit:
<div class="row">
<div class="col-md-3 col-lg-3">
<div class="custom-left-tabs -text--uppercase">
<div class="custom-left-tabs-btn hidden-lg hidden-md">
Menu<i class="fa fa-angle-down"></i>
</div>
<ul id="lefttabs" class="list-unstyled collapse">
<li class="sub-heading">Getting Started</li>
<li><a data-toggle="tab" href="pages/first.html">First</a></li>
<li><a data-toggle="tab" href="pages/second.html">Second</a></li>
</ul>
</div>
</div>
<div id="content" class="tab-content col-lg-9 -bg--white -padding--m">
</div>
</div>
This is my script:
$(document).ready(function(){
$("#content").load("pages/first.html");
});
$("li").find('a').click(function(){
var page = $(this).attr('href');
$("#content").load(page);
return false;
});
Ideally I would prefer not having all content chucked into one page. I've checked many similar questions/videos, but I can't really find the missing bit.
My question is really how should I write a script that does this extra bit of displaying the current tab on the URL.
Here this thing can be done using iframe which works well,
but as you suggested i have tried it. here is my code.
reference same as you gave before.
Now i am showing code here
use js in this manner:
<script src="jquery.min.1.4.js"></script>
<script src="jquery.blockUI.js"></script>
<script>
$(function(){
$("#tabs a").click(function(e){
$("#tabs li").removeClass("on");
$(this).parent("li"). addClass("on");
var page = this.hash.substr(1);
$("#content_wrapper").block();
$.get(page+".html",function(html){
$("#content").html(html);
$("#content_wrapper").unblock();
});
});
});
</script>
and html code with "<div>" tag.
<ul id="tabs">
<li>TAb1</li>
<li>TAb2</li>
</ul>
<div id="content_wrapper">
<div id="content">
</div>
</div>
i have also used jquery.min.js and blocjUI.js and css
css code is here
<style>
ul {
margin:0px;
padding:0px;
overflow:hidden;
}
li {
float:left;
list-style:none;
padding:10px;
background-color:#333;
border: 1px solid #ccc;
}
li a {
color: #FFF;
text-decoration:none;
font-family:arial;
}
#content_wrapper {
width:400px;
height:300px;
background-color: #ccc;
margin: 0px;
padding:6px;
overflow: hidden;
}
#content {
font-family: arial;
}
li.on {
background-color:#ccc;
}
li.on a {
color:#333;
}
and you will get two different page in one page.
Scrren1:
screen2:
Does anybody knows how can I add some bootstrap icons to my textarea. Icons should show on focus and hide on focus out. This textarea is similary, if not the same as Facebook Add new status textarea.
All I was able to do is to expand and shrink textarea onfocus/focusout events, using JavaScript.
This is the code I have:
HTML:
<div class="jumbotron" style="height:150px">
<div class="col-lg-12">
<textarea class="expand" rows="3" cols="20"></textarea>
</div>
</div>
JS:
<script type="text/javascript">
$('textarea.expand').focus(function () {
$(this).animate({ height: "4em" }, 500);
});
$('textarea.expand').focusout(function () {
$(this).animate({ height: "2em" }, 500);
});
</script>
CSS:
.expand
{
height: 2em;
width: 50%;
}
I've also try using .css in JS and trying to add icon, but I suppose I don't do this right way, cause nothing gets shown.
$('textarea.expand').focus(function () {
$(this).animate({ height: "4em" }, 500);
$(this).css('glyphicon glyphicon-camera');
});
Textarea should behave like this:
OnFocusOut:
OnFocus:
Can someone help me, and give me an idea on how to do this...Because I'm pretty bad in JS.
One Simple answer can be creating a sibling div element to the textarea which will contain all the icons, show the div of focusing the textarea and hide it on focusout of the textarea
This example is using the selector
.parent:hover .links{}
but could be edited to
.parent:focus .links{}
if desired. However, to show you this in action, i've designed a simple demo below:
.parent{
height:100px;
width:70%;
background:red;
position:relative;
}
.parent:hover .links{
display:block;
}
.links{
display:none;
position:absolute;
bottom:0;
}
<div class="parent">
<div class="child">
<div class="links">
facebook twitter etc
<img src="http://placekitten.com/g/20/20" alt="" />
</div>
</div>
</div>
An example using Sibling selectors
Here is a working example of using the sibling selector
input:focus + .items
which selects the class .items of which has a sibling of 'input' which has a focus (i.e. what you're looking for)
#parent{
height:100px;
width:80%;
background:red;
position:relative;
}
.items{
bottom:0;
padding:5px;
display:none;
}
input:focus + .items{
display:block;
}
<div id="parent">
<input type="text" placeholder="enter text"/>
<div class="items">
<img src="http://placekitten.com/g/20/20" alt=""/>
<img src="http://placekitten.com/g/20/20" alt=""/>
<img src="http://placekitten.com/g/20/20" alt=""/>
</div>
</div>
I have created a simple jQuery drop down menu using the slideUp and slideDown functions. It works if the user would slowly hover over each allowing the previous one to finish but that would never happen in reality.
How would I go about improving the code so it would be a smooth transition for each dropdown?
Here is a working fiddle of my dilema: jsfiddle and here is the code:
HTML
<div id="header">
<a id="item1" class="item" href="">Item 1</a>
<a id="item2" class="item" href="">Item 2</a>
</div>
<div id="box1">box1</div>
<div id="box2">box2</div>
CSS
#header{
width:100%;
height:50px;
background:blue;
text-align:right;
}
.item{
color:#fff;
width:50px;
height:50px;
display:inline-block;
background:gray;
}
#box1{
width:200px;
height:100px;
background:gray;
display:none;
float:right;
}
#box2{
width:200px;
height:100px;
background:gray;
display:none;
float:right;
}
jQuery
$('#item1').hover(function(){
$('#box1').stop().slideDown();
}, function(){
$('#box1').stop().slideUp();
});
$('#item2').hover(function(){
$('#box2').stop().slideDown();
}, function(){
$('#box2').stop().slideUp();
});
Specifies the speed of the slide effect.
Possible values:
milliseconds
slow
fast
The key is using promise() to waint until animation is ended.
You can check how its work there: http://jsfiddle.net/mcXBB/4/
I also changed your events to more flexible way which allow you to handle more menu positions in easier way:
<div id="header">
<a id="item1" class="item" rel="#box1" href="">Item 1</a>
<a id="item2" class="item" rel="#box2" href="">Item 2</a>
</div>
<div id="box1" class="boxes" >box1</div>
<div id="box2" class="boxes" >box2</div>
$('#header a')
.mouseenter( function() {
var boxId = $(this).attr('rel');
$('.boxes').promise().done( function() {
$(boxId).slideDown();
});
})
.mouseleave(function() {
var boxId = $(this).attr('rel');
$('.boxes').promise().done( function() {
$(boxId).slideUp();
});
});
check this awesome way to let you hover only apply to filtered not in animation, this will fix your question i guess .
$('#box1').filter(':not(:animated)').slideUp();
I try to create a web page with a fixed navigation bar at the top that covers the content underneath. When loading the page with an anchor in the url the normal behaviour is that the page scrolls the anchor to the top of the window. But then that content is hidden under the navigation bar. So I try to solve this problem with JavaScript scrollTo(). My solution works fine with Firefox and Opera but not in Chrome. Please try the example. Any ideas how to fix this issue in Chrome? Thank you.
test.htm:
<!DOCTYPE HTML>
<html>
<head>
<title>Test</title>
<meta charset='UTF-8'>
<style type='text/css'>
#navi { position:fixed; left:0; top:0; width:100%; height:100px; background-color:yellow; }
#spacer { background-color:cyan; height:100px; }
#spacer2 { height:1000px; }
.style1 { background-color:green; height:200px; }
</style>
<script type='text/javascript'>
/* <![CDATA[ */
function scrollAnchor() { // doesn't work in Chrome
var y = document.getElementById(window.location.hash.substr(1)).offsetTop - 110;
window.scrollTo(0, y);
//alert(y);
}
/* ]]> */
</script>
</head>
<body id='top' onload='scrollAnchor();'>
<div id='navi'>
<a href='./test2.htm'>Menu</a>
</div>
<div id='main'>
<div id='spacer'></div>
<h3 id='1'>Heading 1</h3><p class='style1'></p>
<h3 id='2'>Heading 2</h3><p class='style1'></p>
<h3 id='3'>Heading 3</h3><p class='style1'></p>
<h3 id='4'>Heading 4</h3><p class='style1'></p>
<h3 id='5'>Heading 5</h3><p class='style1'></p>
<h3 id='6'>Heading 6</h3><p class='style1'></p>
<div id='spacer2'></div>
</div>
</body>
</html>
test2.htm:
<!DOCTYPE HTML>
<html>
<head>
<title>Test</title>
<meta charset='UTF-8'>
</head>
<body>
<a href='test.htm#1'>Heading 1</a>
<a href='test.htm#2'>Heading 2</a>
<a href='test.htm#3'>Heading 3</a>
<a href='test.htm#4'>Heading 4</a>
<a href='test.htm#5'>Heading 5</a>
<a href='test.htm#6'>Heading 6</a>
</body>
</html>
Chrome is so fast that your scrollTo() action fires before Chrome's default scroll to html anchor event.
Give it a tiny delay by using
setTimeout(function() {window.scrollTo(0, y);},1)
Or simply avoid using the actual element id as hash name
instead of using
test.htm#6
use
test.htm#link_6
then you can get the real id by doing something like
window.location.hash.split('_')[1]
Hope it helps.
I would suggest avoiding the use of JavaScript in favor of creating a dedicated anchor element and then offsetting it above the heading by at least your header height.
This has already been well described in https://stackoverflow.com/a/13184714/5951116.
Your code would then look something like this:
<div id='navi'>
<a href='./test2.htm'>Menu</a>
</div>
<div id='main'>
<div id='spacer'></div>
<div class='article-wrapper'>
<a class='anchor' id='1'></a>
<h3>Heading 1</h3><p class='style1'></p>
</div>
<div class='article-wrapper'>
<a class='anchor' id='2'></a>
<h3>Heading 2</h3><p class='style1'></p>
</div>
...
</div>
#navi {
height: 50px;
}
#main a.anchor {
display: block;
position: relative;
top: -50px;
visibility: hidden;
}
Or use CSS variables to remove as much tight coupling as possible:
:root {
--header-height: 50px;
}
#navi {
height: var(--header-height);
}
#main a.anchor {
display: block;
position: relative;
top: -var(--header-height);
visibility: hidden;
}
I've got a small page with two links that load content into a div dependant upon which link is pressed.
Question is fairly obvious, i'd like to highlight the current content link with a different color and toggle the color according to which link is pressed.
I'm attempting to do this with my current function using the following however it isn't working:
Pretty simply question so i'm obviously being dumb. Any help would be much appreciated.
Thanks!
<script type="text/javascript">
function loadContent(id) {
$("#video").load("streams.php?o="+id+"");
$('active').removeClass('active');
$(this).addClass('active');
}
</script>
Full code:
<html>
<head>
<title>beam</title>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.registerObject("myId", "9.0.0", "expressInstall.swf");
</script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function loadContent(id) {
$("#video").load("streams.php?o="+id+"");
$('active').removeClass('active');
$(this).addClass('active');
}
</script>
<style>
* { margin:0; padding:0; }
img{ border-style:none; }
html { height: 100%; }
body { height: 100%; font-family: "Tahoma", "Arial", sans-serif; font-size:15px; font-weight: bold;}
a {
color:#fff;
text-decoration: none;
}
.active {
color:#00d2ff;
}
.container {
position:absolute;
background:url("images/video-bg.jpg") no-repeat;
width:520px;
height:576px;
}
#video {
position:relative;
background:#000;
top:275px;
left:55px;
width:400px;
height:222px;
}
#stream-controller {
position:relative;
left:55px;
top:285px;
width:200px;
}
</style>
</head>
<body onLoad="loadContent(1);">
<div id="fb-root"></div>
<div class="container">
<div id="video">
</div>
<div id="stream-controller">
<p>STREAM 1 | STREAM 2</p>
</div>
</div>
</body>
</html>
One issue is your selector for the active link:
$('active').removeClass('active');
should be:
$('.active').removeClass('active');
The other issue, though I haven't tested this yet, is that I don't believe using href="javascript:loadContent(1);" will set the value of this in the function to the appropriate a element. If you're working with jQuery, you'd be better off setting the handler with jQuery, and passing the variable through the tag, something like:
<a class="stream active" href="streams.php?o=1">STREAM 1</a>
with the jQuery code:
$(function() {
$('a.stream').click(function(e) {
var $this = $(this);
$("#video").load($this.attr('href'));
$('.active').removeClass('active');
$this.addClass('active');
// prevent default link click
e.preventDefault();
})
});
Why don't you just do it in CSS?
a {
color:#fff;
text-decoration: none;
}
a:active {
color:#00d2ff;
}
editing out a part of my solution : ninja'd and a much better one from nrabinowitz
To toggle the "active" class to the link pressed, I would do this:
var $a = $("a");
$a.click(function() {
$a.removeClass("active");
$(this).addClass("active");
});