Questions about LocalScroll and ScrollTo (jQuery) - javascript

this problem might seem pretty trivial to some of you guys but i'm sorry i can't handle it.
Problem: I have one Div-Box called "DivBox" with the attribute overflow:hidden; and i want to display other information in it by scrolling to other divs inside of it.
Above I have links that refer to that other information.
Info
Info2
<div id="DivBox">
<div id="info1">Information</div>
<div id="info2">other Information</div>
</div>
I also included jquery, ScrollTo, LocalScroll and Easing and wrote this code:
$('#LinkToInfo').click(function(){
$('#DivBox').localScroll({
target:'#info1'
});
});
$('#LinkToInfo2').click(function(){
alert("Debugging reasons");
$('#DivBox').localScroll({
target:'#info2'
});
});
But it doesn't work. I tried debugging it but it did just not scroll. What am i doing wrong?
I hope you can help me. Thanks

Not sure if this will work, but try removing the href="#" from the <a> tags.

Related

jQuery accordion - style="display:none; - stops javascript

I'm using an accordion style html code
<div class="accordion-link">Link</div>
<div class="accordion-panel" style="display:none;">content</div>
with this jQuery script
$(function(){
$('.blog .accordion-link').click(function(){
if(!$(this).hasClass('accordion-on'))
$('.blog .accordion-link').removeClass('accordion-on');
$(this).toggleClass('accordion-on');
$(this).next(".accordion-panel").slideToggle().siblings(".accordion-panel:visible").slideToggle();
})
});
In the first accordion tab I'm using a fotorama slideshow.
The problem I'm facing is, that the 'style="display:none;' breaks/stops the execution of the slideshow. How can use the slideshow after toggling the accordion?
Regards
Peter
Try removing the inline style from there, and add a parent <div> which wraps all that, and then control the slideToggle from there, not on the accordion itself.
<div class="acc">
<div class="accordion-link">Link</div>
<div class="accordion-panel" style="display:none;">content</div>
</div>
Also I'm not sure what your if is for but you can just use toggleClass()
Hail mary guess
Try:
<div class="accordion-panel"style="visibility:hidden;">content</div>
I think the plugin is trying to manipulate that css.
Do you have a demo I could look at? I might be able to give a better answer.
$(function(){
$('.accordion-link').click(function(){
if(!$(this).hasClass('accordion-on'))
$('.accordion-link').removeClass('accordion-on');
$(this).toggleClass('accordion-on');
$(this).next(".accordion-panel").slideToggle().siblings(".accordion-panel:visible").slideToggle();
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="accordion-link">Link</div>
<div class="accordion-panel" style="display:none;">content</div>
<div class="accordion-link">Link2</div>
<div class="accordion-panel" style="display:none;">content2</div>
<div class="accordion-link">Link3</div>
<div class="accordion-panel" style="display:none;">content3</div>
I didn't see any wrong with your code
I removed the inline style "display:none" and added this line of code in jQuery script
$('.accordion-panel').css('display','none');
This helps fotorama initialize and start - but with the wrong image size.
Adding this line of code to the click(function)
$(window).trigger('resize');
resolves the problem. Now it works.

Why I cant get to hidden article by putting url with hashname?

I have been looking for solution, but i don't find anything, that would suit me. I got a page with header and content divs. Content div is not visible. After clicking on item in nav menu, I want to hide header, and show chosen article. I achieved it, but when I try to get to article by url#name nothing happens.
"jsfiddle" wont be useful in this case, but i will paste it to show my code.
Is there different way to do it? Maybe somehow hide articles with code, then just change opacity, maybe use "addclass" from jquery? I don't really know, im mixed and stuck.
Thanks for help.
https://jsfiddle.net/edby86ta/8/
You can also do it in full css :
https://jsfiddle.net/edby86ta/11/
In this case, the hardest part is hiding it again. You'd have to have a "close" button directing to another (maybe nonexistant) anchor :
Close
You can apply very simple JS conditions to show and hide your articles based on the link, I`ve updated you JSfiddle.
https://jsfiddle.net/edby86ta/10/
$(function () {
//GET HASH FROM URL, CHECK IF ELEMENT EXISTS AND THEN SHOW IT
$(document).ready(function(){
var hash = window.location.hash;
if(hash.length){
$(hash).show();
}
})
$(".article-nav a").on("click", function () {
$(".main-article").hide();
console.log($(this).attr("id"));
$('#article-' + $(this).attr("id")).show();
});
});
article {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<nav>
<ul class="article-nav">
<li><a id="1" href="#article-1">Article 01</a></li>
<li><a id="2" href="#article-2">Article 02</a></li>
</ul>
</nav>
</header>
<div id="content">
<article id="article-1" class="main-article">Article 01 Lorem ipsum</article>
<article id="article-2" class="main-article">Article 02 Lorem ipsum</article>
</div>
<footer></footer>
Advice: Be aware that the user can change the hash as he wants, injecting anything to your selector, you should check the hash before using it.

How to hide <body> without DIV?

Thanks to anyone who solves/helps solving this request. Sorry if this is an impossible/previously asked request. I searched for it, couldn't find it, so posted a question.
So, the issue is, I want to hide using JS, but, I don't wanna use DIV tags to do so.
<body>
<div id="1">Content 1</div>
<div id="2">Content 2</div>
<div id="3">Content 3</div>
</body>
I know the possibilty of grouping the DIV's into a single DIV container, but just wanted to know, if it's possible without that, i.e., hiding the whole <body></body>
Thanks again.
It is possible with javascript like this:
document.getElementsByTagName("BODY")[0].style.display = "none";
jsFiddle here: http://jsfiddle.net/aq2ab77v/1/
The JavaScript way of accomplishing this:
document.getElementsByTagName("body")[0].style.display = "none";
The jQuery way of accomplishing this:
You will want to select the body tag with jquery, and run .hide() on it.
$('body').hide();

How to slide down dynamic content using jQuery?

I have a comment system and I would like to implement the "Show Replies (2)" slide down effect.
This is an example of my setup.
<div class="comment">
<div class="main-comment">
Message.
Show Replies (1)
</div>
<div class="sub-comment">
Funny comment up there, mate.
</div>
</div>
But because both the main comment and its sub comments are dynamically generated using ajax, setting event handlers was a little tricky. This is how I did it:
$(".comment").delegate('.show-replies', 'click', function(event) {
$(this).parent().next(".sub-comment").slideDown();
});
I've tried to make the setup as simple and close to the real thing as possible.
What am I doing wrong and how do I solve it?
<div class="comment">
<div class="main-comment">
Message.
Show Replies (1)
</div>
<div class="sub-comment" style="display: none">
Funny comment up there, mate.
</div>
</div>
<script>
$(document).ready(function() {
$('.show-replies').on('click', function() {
$('.sub-comment').slideToggle();
});
});
</script>
In order to bind to NEW dynamic content you need to tell jquery where it is going to be.. Also make sure to use the latest jQuery, delegate is old.
<div class="comments">
<div class="main-comment">
Message.Show Replies (1)
</div>
<div class="sub-comment" style="display: none">
Funny comment up there, mate.
</div>
</div>
<script>
$(document).ready(function() {
$('.show-replies').on('click','.comments', function() {
$('.sub-comment').slideToggle();
});
});
</script>
Notice the .on(eventType, selector, function) signature.
This will work for dynamic content, anything loaded INTO the div class 'comments' - jQuery will always travesre that container from fresh, instead of caching it.
Also- dont just do it on the entire page,because it will cause slow response, since, every click, it will try and bind to the selector.
Replacing
$(this).parent().next(".sub-comment").slideDown();
with
$(this).parent().parent().next(".sub-comment").slideDown();
Fixed the problem.

jquerymobile popup function is not working in the onClick

I have:
<div data-role="page" class="type-interior">
<div data-role="content" class="ui-body">
<a href="#transitionExample" data-role="button" data-rel="popup">
Pop Up
</a>
<div data-role="popup" id="transitionExample">This is a POP UP.</div>
<a href=# onClick="$('transitionExample').popup('open')"
data-rel="popup">OpenPopUp</a>
</div>
</div>
If I click on Button It Works, but if I use Javascript method .popup('open'), nothing happens. Popup is not showed.
What is happening?
I use, JqueryMobile 1.2.0 and JQuery 1.8.2.
$('transitionExample').popup('open')
should be
$('#transitionExample').popup('open')
for more info see: http://api.jquery.com/id-selector/
then you better bind your link in the .ready(), you should try to avoid Javascript code in the DOM for better maintainability.
OpenPopUp
and between your <script></script> tags
$(function () {
$("#myButton").click(function () {
$('#transitionExample').popup('open');
});
});
I ran into this thread whilst trying to find the reason for precisely the same behavior - clicking on a data-rel='popup' link was working but the popup() method was not showing anything. After much frustration I eventually discovered that the issue was down to the fact that I had coded
$('#popupid').popup(open)
NO QUOTES! No one complained - Chrome did not throw up an error but the popup call did nothing.
Hopefully, this will help someone else one day.

Categories