Toggle a menu from the left - javascript

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>

Related

Magnific-Popup Not Working

I want to implement the magnific popup on my website, I followed all the instructions in the documentation, but nothing happened.
here are the header files I included.
<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="magnific-popup/magnific-popup.css">
<!-- jQuery 1.7.2+ or Zepto.js 1.0+ -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js" type="text/javascript"></script>
<!-- Magnific Popup core JS file -->
<script src="magnific-popup/jquery.magnific-popup.js"></script>
<script src="magnific-popup/jquery.magnific-popup.min.js"></script>
This is my initialization code.
<script src="js/magnificpopinit.js"></script> (at the end of index.html within body)
$(document).ready(function() {
$('.portfolio-img').magnificPopup({
delegate: 'a',
type:'image'
});
});
and my code is
<div class=" col-xs-offset-1">
<div class=" twelve columns container">
<div data-anim-type="fadeInUp" class="setwidth25 animate fadeInUp">
<div class="box"> <a class=" portfolio-img" href="Website/Community Service/Aug 15 Plantation/20840999_1763381930619812_5996646119960337765_n.jpg"><img alt="plantation" BORDER="0" src="Website/Community Service/Aug 15 Plantation/20840999_1763381930619812_5996646119960337765_n.jpg" height="200" width="200"> </a></div>
</div>
<div data-anim-type="fadeInUp" class=" setwidth25 animate fadeInUp">
<div class="box"> <a class="portfolio-img" href="Website/Community Service/Aug 15 Plantation/20840999_1763381930619812_5996646119960337765_n.jpg"><img alt="plantation" src="Website/Community Service/Aug 15 Plantation/20841080_1763381967286475_679893694361630086_n.jpg" height="200" width="200"> </a></div>
</div>
<div data-anim-type="fadeInUp" class=" setwidth25 animate fadeInUp">
<div class="box"> <a class="portfolio-img" href="Website/Community Service/Aug 15 Plantation/20840999_1763381930619812_5996646119960337765_n.jpg"><img alt="plantation" src="Website/Community Service/Aug 15 Plantation/20914365_1763382237286448_3724536977546091967_n.jpg" height="200" width="200"> </a></div>
</div>
<div data-anim-type="fadeInUp" class=" setwidth25 animate fadeInUp">
<div class="box"> <a class="portfolio-img" href="Website/Community Service/Aug 15 Plantation/20840999_1763381930619812_5996646119960337765_n.jpg"><img alt="plantation" src="Website/Community Service/Aug 15 Plantation/20953405_1763381833953155_7689290877386847638_n.jpg" height="200" width="200"> </a></div>
</div>
</div>
</div>
Console shows no error related to magnific popup,yet it is not working. I searched many related articles but none of them worked. I'm banging my head with this for more than 6 hours.
Is there any problem with my code. How do I make it work? Please help!!... Thanks in advance.
replace this block of code in your code. And make sure your jquery and js path is correct. you used multiple jquery and magnific js that's not necessary. remove it and try only two script file that i include here. i used it from cdn. It works here fine. Hope that will help you.
$('.portfolio-img').magnificPopup({
type: 'image',
closeOnContentClick: true,
image: {
verticalFit: false
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.js"></script>
Seems that you have not wrapped JavaScript code inside <script></script> tags:
<script src="js/magnificpopinit.js"></script> (at the end of index.html within body)
$(document).ready(function() {
$('.portfolio-img').magnificPopup({
delegate: 'a',
type:'image'
});
});
It probably should be:
<script src="js/magnificpopinit.js"></script> (at the end of index.html within body)
<script>
$(document).ready(function() {
$('.portfolio-img').magnificPopup({
delegate: 'a',
type:'image'
});
});
</script>

Div show/hide is not working inside partial view

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

Add smooth-vertical scrolling within specific div overflow, via buttons

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);
});

Show div on click and scroll down to it

I want to create a div that when clicked on, pops open another div and scrolls down to it.
Here's my take on it but it is not working. What is the correct way?
html
<div class="image">
<img src="https://dotcms.com/contentAsset/image/47ffbc9c-f224-47a2-ba6c- 0fedb202dbe9/diagram1/filter/Scale/scale_w/500/scale_h/800">
</div>
<div id="box" style="display:none;"></div>
jquery
$(document).ready(function() {
$('.image').click(function() {
$('#box').slideToggle("fast");
$('html, body').animate({
scrollTop: $('#box').offset().top
}, 2000);
});
});
Try scrollIntoView()
$(document).ready(function() {
$('.image').click(function() {
$("#box").show()
$('#box').get(0).scrollIntoView()
});
});
#box{background-color:#000;height:100px;display:block;width:100%;}
.mage{display:block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="image">
<img src="https://dotcms.com/contentAsset/image/47ffbc9c-f224-47a2-ba6c-0fedb202dbe9/diagram1/filter/Scale/scale_w/500/scale_h/800">
</div>
<div id="box" style="display:none;">
</div>
You need to remove display:none inline css and add display:none to external css of #box div. here is the updated fiddle
<div id="box">
</div>
#box{background-color:#000;height:100px;display:none;width:100%;}

jQuery slide toggle change image onclick?

When I click on the .main_box div both arrow-up images change. I want to change only the first arrow-up image when I click on first .main_box div.
Does anyone know how to do this?
<div class="wrapper">
<div class="main_box">
<div class="arrow-up"><img src="arrow-up.png"></div>
<div class="arrow-down"><img src="arrow-down.png"></div>
</div>
<div class="sliding_box"></div>
</div>
<div class="wrapper">
<div class="main_box">
<div class="arrow-up"><img src="arrow-up.png"></div>
<div class="arrow-down"><img src="arrow-down.png"></div>
</div>
<div class="sliding_box"></div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".arrow-up").hide();
$(".main_box").click(function(){
$(this).siblings(".sliding_box").slideToggle(500);
$(".arrow-up, .arrow-down").toggle();
});
});
</script>
Change to this instead, this should only toggle sub-elements to the clicked element.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".arrow-up").hide();
$(".main_box").click(function(){
$(this).siblings(".sliding_box").slideToggle(500);
$(this).find(".arrow-up, .arrow-down").toggle();
});
});
</script>
Check this jsfiddle.net
JS
$(document).ready(function() {
$('#toggle3').click(function() {
$('.toggle3').slideToggle('1100');
var src = $("#bg3").attr('src') == "http://s8.postimg.org/maan1hkrl/box_arrow_down_green.jpg" ? "http://s12.postimg.org/jy2yiw6ix/box_arrow_up_green.jpg" : "http://s8.postimg.org/maan1hkrl/box_arrow_down_green.jpg";
$("#bg3").attr('src', src);
});
});
Other Code part you get From jsfiddle Link

Categories