I have a div on my site which is populated with blogs from an RSS feed. On the top and bottom, are buttons to scroll up and down within the div (as it has hidden overflow for extra blogs). I'm wondering what I need to add, in order to make this a smooth scroll, rather than just snap-scrolling on click.
HTML:
<div class="col-md-4 hidden-xs hidden-sm" id="blogSection">
<div class="row" id="scrollUp">
<button id="downClick"><i class="fa fa-chevron-up fa-2x"></i></button>
</div>
<!-- ------------ BLOGS RSS FEED POPULATED ------------- -->
<div id="homeBlogs">
<script language="JavaScript" src="http://feed2js.org//feed2js.php?src=http%3A%2F%2Fblogs.msbcollege.edu%2Ffeed%2F&chan=y&desc=250>1&targ=y&utf=y" charset="UTF-8" type="text/javascript"></script>
<noscript>
View RSS feed
</noscript>
</div>
<!-- END RSS POPULATION ---------- -->
<div class="row" id="scrollDown">
<button id="upClick"><i class="fa fa-chevron-down fa-2x"></i></button>
</div>
</div>
JS:
$(document).ready(function() {
$("#upClick").click(function() {
$('#homeBlogs').scrollTop($('#homeBlogs').scrollTop() + 200);
});
$("#downClick").click(function() {
$('#homeBlogs').scrollTop($('#homeBlogs').scrollTop() - 200);
});
});
Since you are using jQuery, you are probably looking for the jQuery animate library:
var scrollTime = 2000;
$('#upClick').click(function() {
$('#homeBlogs').animate({
scrollTop: $('#homeBlogs').scrollTop() + 200
}, scrollTime);
});
$('#downClick').click(function() {
$('#homeBlogs').animate({
scrollTop: $('#homeBlogs').scrollTop() - 200
}, scrollTime);
});
Related
I have a partial view, based on the content of view bag I want to show the div and fade out after some second,for this I am using jQuery. everything is working fine if I put the code in main view. Unfortunately I want to have this pop up inside Partial view. code given below
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="error_Msg_div" class=" " data-label="canccelled" data-left="0" data-top="0" data-width="0" data-height="0" style="display:block;position: absolute !important; left: 600px !important ;" >
#if (!string.IsNullOrEmpty(ViewBag.Message))
{
<!-- Unnamed (Rectangle) -->
<div id="error_text" class="ax_default label">
<!-- Unnamed () -->
<div id="error_msg" class="text">
<p><span>#ViewBag.Message</span></p>
</div>
</div>
}
</div>
<div>
#if (!string.IsNullOrEmpty(ViewBag.Message))
{
<script type="text/javascript">
alert("error");
$("#error_Msg_div").show();
$("#error_Msg_div").fadeOut(5000);
</script>
}
</div>
here even the JavaScript alert is working fine. But the Show and Fade out is not working.
Move you script outside (and after) the div you are attempting to operate on. Open chrome developer tools and post any remaining error you find in the console.
Please find answer as below
<div id="error_Msg_div" class=" " data-label="canccelled" data-left="0" data-top="0" data-width="0" data-height="0" style="display:block;position: absolute !important; left: 600px !important ;">
#if (!string.IsNullOrEmpty(ViewBag.Message))
{
<!-- Unnamed (Rectangle) -->
<div id="error_text" class="ax_default label">
<!-- Unnamed () -->
<div id="error_msg" class="text">
<p><span>#ViewBag.Message</span></p>
</div>
</div>
}
</div>
<script type="text/javascript">
$(document).ready(function () {
if ('#ViewBag.Message' == '') {
alert("error");
$("#error_Msg_div").show();
$("#error_Msg_div").fadeOut(5000);
}
});
</script>
you need call javascript function when view load
How can I get scroll to the next class element called section and vice versa?
Below are the code i have tried so far:-
<div class="section">
content
</div>
<div class="hero">
content
</div>
<div class="midPage">
content
</div>
<div class="section">
content
</div>
<!-- Scroll Buttons -->
<div class="prev">
<button class="prevButton">Prev</button>
</div>
<div class="next">
<button class="nextButton">Next</button>
</div>
Check this fiddle
I did it fast, only next button working, not the best approach.
Check the data- attributes and how is working, i repeat, this is not the best approach.
$(".nextButton").on('click', function(e) {
var dataGoTo = $(this).attr("data-section");
var next = $(dataGoTo).attr("data-next");
$('html, body').animate({
scrollTop: $(dataGoTo).offset().top
}, 500);
$(this).attr("data-section", next);
});
So I am using a plugin that creates a vertical paging animation.
It basically makes a fullscreen box and moves the "sections" through this box.
Here is the html to help show what I mean.
<div id="fullpage">
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
</div>
I had a simple javascript function to hide my nav whenever you scroll down. The problem is, with this new plugin, you don't actually scroll down. Sections just move inside a stationary box.
Here is the javascript function I was using for the nav.
$(window).scroll(function (event) {
var y = $(this).scrollTop();
if (y > 0) {
$('#navBar').addClass('scroll');
}
else{
$('#navBar').removeClass('scroll');
}
});
So the y > 0 doesn't trigger with this plugin anymore so the nav won't hide properly.
I'm thinking there has to be a way to change this simple code a little and make it work. Maybe by using IDs inside the sections possibly?
Here is how my html looks with the general structure from the plugin applied.
<!DOCTYPE html>
<html>
<head>
<title>Aldi Rebrand</title>
<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css"/>
<link rel="stylesheet" type="text/css" href="css/main.css"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.fullPage.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body class="red">
<div id="navBar" class="preHidden">
<img id="navLogo" src="images/navLogo.png">
<ul>
<li class = "navLink mainLink">Work</li>
<li class = "navLink mainLink">About</li>
<li class = "navLink mainLink">Blog</li>
</ul>
</div>
<div id="fullpage">
<div class="section">
<div id="aldiPhoto"></div>
<div id="descriptionAldi">
<h2>ALDI Rebrand <span>BRANDING | LOGO | PRINT</span></h2>
<p class="intro"><strong>ALDI</strong> is an international grocer, spanning from Germany to The United States and many other countries around the world.</p>
<p class="prjctDescription">The premise behind this semester long project was to immerse ourselves in the company/brand we were assigned. I was assigned ALDI. In this scenario, the goal of the rebrand was to convey a new “fresh and local” side to ALDI and their proposed farmers market addition to their stores. We were asked to create a brand new logo, at least four pieces of collateral and a brand guideline to demonstrate our research, branding applications and flexibility.</p>
<div class="btnDiv">
<div class="btn1"><p>VIEW ON DRIBBBLE</p></div>
<div class="btn2"><p>VIEW ON BEHANCE</p></div>
</div>
</div>
</div>
<div class="section">
<div id="aldiPage2"></div>
</div>
<div class="section">
<div id="aldiPage3"></div>
</div>
</div>
<div class="ticker"><p class="currentPage">1</p><div class="tickerBtm"><p class="maxPage">3</p></div></div>
</body>
</html>
And here is a jsfiddle of this page: https://jsfiddle.net/L0h1uxLo/1/
You can use the onLeave event to get the scrolled index value and toggle the class scroll.
$('#fullpage').fullpage({
onLeave: function (anchorLink, index, slideIndex, direction) {
//console.log(index);
if (index > 1) {
$('#navBar').addClass('scroll');
} else {
$('#navBar').removeClass('scroll');
}
}
});
Fiddle Demo
I am trying to get a menu to slide from the left when I click on a link. I have been following JSFiddle without success. The div remains in one spot and does not slide. Based on the example the div should be hidden and slide into view with click then slide out when I click again. It starts off hidden then comes into view without sliding and does not slide back. I am very new to jQuery, but have been studying very hard.
In my master page I have set the scripts for the page:
<script src="/Scripts/jquery-1.11.1.js" type="text/javascript" ></script>
<script type="text/javascript" >
$(document).ready(function () {
$("#click").click(function () {
$("#slider").toggle("slide", {
direction: "left",
distance: 280
}, 500);
});
});
</script>
<a id="click" href="#" runat="server" style="position:relative;top:0px;">Slide</a>
<div id="wrapper">
<div id="box">
<div id="slider" runat="server" class=" divColCtr RoundBorder" style="display:none">
//controls inside here
</div>
</div>
</div>
Is the problem that I am trying this on the master page? I need a menu for each page and would hate to think I have to add to each, but if so then that is fine.
A requirement for the fiddle you are trying to replicate is : jQuery UI 1.9.2
This can be downloaded here : http://blog.jqueryui.com/2012/11/jquery-ui-1-9-2/
On the left side of the jsFiddle you can see external requirements/dependencies
Include this just after your jquery reference and it should be fine.
Try this as your code :
<script src="http://code.jquery.com/jquery-1.11.0.min.js" ></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" type="text/javascript"
></script>
<script type="text/javascript" >
$(document).ready(function () {
$("#click").click(function () {
$("#slider").toggle("slide", {
direction: "left",
distance: 280
}, 500);
});
});
</script>
<a id="click" href="#" runat="server" style="position:relative;top:0px;">Slide</a>
<div id="wrapper">
<div id="box">
<div id="slider" runat="server" class=" divColCtr RoundBorder" style="display:none">
//controls inside here
</div>
</div>
</div>
I'm trying to create a Tumblr theme in which the links and post information slide in when you click a + sign. (My test blog is at http://noitsnotitsnotokay.tumblr.com/)
I'm quite the begginner at JavaScript, but I was able to work it out for a links menu with the following code:
<span class="btn">+</span>
<ul class="lks">
<!-- various links are here -->
</ul>
<script>
$("ul.lks").hide();
$("span.btn").click(function () {
$("ul.lks").slideToggle("slow");
});
</script>
But I also have a piece of code that applies to all posts, for the post information. I used nearly the same code, but, as you can probably see, it slides in and out various times.
<div class="pstinfo">
<!-- info is here -->
</div>
<span class="plsign">+</span>
<script>
$("div.pstinfo").hide();
$("span.plsign").click(function () {
$("div.pstinfo").slideToggle("slow");
});
</script>
It seems that the button's order and the way I name the classes in the JavaScript isn't changing much...any tips?
If you you don't want to open all the '.pstinfo' elements when you click on '.plsign', just the related one, try this code:
HTML:
<div class='parentContainer'> <!--put your elements in a parent Container -->
<div class='info'>
Info 1
</div>
<div class='plsign'>
+ Open
</div>
</div>
<div class='parentContainer'>
<div class='info'>
Info 2
</div>
<div class='plsign'>
+ Open
</div>
</div>
<div class='parentContainer'>
<div class='info'>
Info 3
</div>
<div class='plsign'>
+ Open
</div>
</div>
JS:
$(".plsign").on('click',function ()
{
$(this).parent().find('.info').slideToggle("slow");
});
Link to jsFiddle
code block 01
<span class="btn">+</span>
<ul class="lks">
<!-- various links are here -->
</ul>
<script>
$("ul.lks").hide();
$("span.btn").click(function () {
$("ul.lks").stop().slideToggle("slow");
});
</script>
Code block 02
<div class="pstinfo">
<!-- info is here -->
</div>
<span class="plsign">+</span>
<script>
$("div.pstinfo").hide();
$("span.plsign").click(function () {
$("div.pstinfo").stop().slideToggle("slow");
});
</script>
Try this code and Update the result :)