I have two pages. The first has a slideshow that allows me to add links for each slide. The second page has numerous expanding div's that are expandable/collapsible onclick using this show/hide function:
function showtxt(divID) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidetxt')?'showtxt':'hidetxt';
}
}
Then each expanding/collapsing div on that page has its own function to call it when clicked:
function ANCHORbutton() {
var img = document.getElementById('expANCHORbutton').src;
if (img.indexOf('plus.png')!=-1) {
document.getElementById('expANCHORbutton').src = 'minus.png';
}
else {
document.getElementById('expANCHORbutton').src = 'plus.png';
}
}
What I'd like to do, if possible, is link each slide from that slideshow to the second page, expand the corresponding div, and then jump down the page to the specified anchor.
If I didn't have everything collapsed, it'd be a simple href="http://domain.com/page2.html#ANCHOR", but I'm struggling with how to expand the appropriate section before jumping to my anchor.
Problem 1: Collapsed divs all show so no need for browser to scroll
Problem 2: Hidden divs are not being scrolled to since they are hidden.
Solution could be this at the bottom of the page (onload does not trigger on reload on some browsers)
<script>
var hash = location.hash;
if (hash) {
var divID = hash.substring(1); // remove the #
showtxt(divID);
document.getElementById(divID).scrollIntoView();
}
</script>
</body>
Update to add 100px:
var hash = location.hash;
if (hash) {
var divID = hash.substring(1); // remove the #
showtxt(divID);
var div = document.getElementById(divID);
div.scrollIntoView();
div.style.top=(parseInt(div.style.top,10)+100)+"px";
}
Related
new user here.
I'm having an issue with a javascript command I've written in my html.
So my page is set up in 3 sections. The sections are represented by 3 icons on a fixed nav bar. What I'm trying to do is have the other two icons opacity decrease depending on what section you scroll to.
I wrote an if-else statement to get it to work and it does for the first section, but when I write a new if-else statement for the next section the next opacity change isn't recognized.
My code:
$(document).ready(function() {
var nav = $(".work1");
var banner = $("#LogoBio");
var pos = nav.position();
var icon1 = $("#Graphics");
var icon2 = $("#Animations");
var icon3 = $("#HandArt");
var section1 = $("#ill4");
var section2 = $("#aniDes");
$(window).scroll(function(){
var windowpos = $(window).scrollTop();
if (windowpos>=banner.outerHeight()){
nav.addClass('fixedTop');
}
else {
nav.removeClass('fixedTop');
}
$(".work1").wrapInner('<div class="nav-inner"</div>');
if (windowpos>=section1.outerHeight()){
icon2.addClass('opacityChange');
icon3.addClass('opacityChange');
}
else {
icon2.removeClass('opacityChange');
icon3.removeClass('opacityChange');
}
});
});
If-else statement for next section?
If anyone has any ideas on a solution I would so appreciate it. Thank you all for your help!
first add class attribute to your icon tags:
<.... id="Graphics" class='icon' ...>
<.... id="Animations" class='icon' ...>
<.... id="HandArt" class='icon' ...>
then, in code first add class to all .icon tags and after it remove that from unwanted ones:
$(".icon").addClass("opacityChange");
if (windowpos>=section3.outerHeight()) {
icon3.removeClass("opacityChange");
} else if (windowpos>=section2.outerHeight()) {
icon2.removeClass("opacityChange");
} else if (windowpos>=section1.outerHeight()) {
icon1.removeClass("opacityChange");
}
I am using following code to show some hidden Bootstrap wells on same pages when a menu item is clicked (works like tabbed content shower). It is working fine, but I want to be able to use it to go to other pages and show a well (based on id attribute there. Its not working that way, please help.
$(document).ready(function()
{
var navItems = $('.menu-level-2 li > a');
var navListItems = $('.menu-level-2 li');
var allWells = $('.menu-level-2-content');
var allWellsExceptFirst = $('.menu-level-2-content:not(:first)');
allWellsExceptFirst.hide();
navItems.click(function(e)
{
e.preventDefault();
navListItems.removeClass('active');
$(this).closest('li').addClass('active');
allWells.hide();
var target = $(this).attr('data-target-id');
$('#' + target).show();
});
});
The question is not fully clear to me, but if you want to go to another page (when clicked on navigation), and on that another page, you want to automatically show that tabbed content, then you should do like this:
navItems.click(function(e)
{
..........
var target = $(this).attr('data-target-id');
window.location='http://example.com/mypage.php#requested_id='+target;
});
and on the target mypage.php, you should have javascript:
$(document).ready(function()
{
if (window.location.hash){
.....
allWells.hide();
$('#' + window.location.hash).show();
}
}
My goal is to have my div menu disappear when I click anywhere else on the page. Below is the code that opens and closes my code when clicking on the two divs themselves.
var content_nav = '';
var content_select = '';
window.onload=function(){
content_nav = document.getElementById("content_nav");
content_select = document.getElementById("content_select");
content_nav.addEventListener("click", show_or_hide);
}
function show_or_hide()
{
if(content_select.style.display!="block") content_select.style.display="block";
else content_select.style.display="none";
}
You should listen to the click event on the whole page and hide the menu if the click was outside content_nav, try this (you might need to tweak it to make it work, I do not know your HTML):
$(document).click(function(e){
if (! $(e.target).closest('#content_nav').length )
$('#content_nav').hide();
});
I'm trying to append a div to the bottom of a another div, by clicking a button in javascript, but once the height of the outer container is reached, it no longer scrolls the list to the bottom, after an insert.
Please see the fiddle here
If you click the red add button until you get to about 13 items in the list, it seems something goes wrong with the scrollTop function, and it it no longer functions correctly (hovers around the same spot in).
I'm pretty lost on this, and have tried a bunch of different combinations of css settings for both the container and side div. Please help me.
I've reformatted your code to be more jQuery-esque. The main change, however, was to change the list.scrollTop() function so that it just scrolls to the bottom of list:
$(document).ready(function() {
var list = $("#q-d-list");
$(document).on('click', '#add', function() {
$('.active', list).removeClass("active");
var count = list.children().length + 1;
var active = $('<div />', {
'data-qid': count,
'class': 'mli active'
}).text('q' + count).appendTo(list);
list.scrollTop(list[0].scrollHeight);
});
});
Demo: http://jsfiddle.net/MrvcB/19/
Use
list.scrollTop(list.get(0).scrollHeight);
rather than
list.scrollTop($(".active").offset().top);
Try:
$(document).ready(function () {
var count = 2;
$("#add").live("click", function () {
var list= $("#q-d-list");
// remove the active class from the old item
var $clone = $(list.find("div:last-child").removeClass("active").clone());
count+=1;
var str_count = "q"+count.toString();
$clone.addClass("active").attr("data-qid",str_count).text(str_count);
list.append($clone);
list.scrollTop(list.get(0).scrollHeight);
});
});
http://jsfiddle.net/H4Kb3/
I want to create a table of content similar to JavaScript Gardens. How do they determine which section is currently active and do you have any recommended JavaScript libraries that imlpement this behavior?
Edit: So the thing I am asking for is how to know which section currently is active on the screen while the user is scrolling so that I can highlight that section in the table of content.
You can detect when an element enters the viewport of your browser, and then highlight the corresponding menu entry.
By using Firebug in Firefox, you can see that they use the scrollTop property of the window to know what the user is looking at.
highlight: function () {
// get the scroll height
var scroll = this.page.window.scrollTop(),
articleID = this.names[this.names.length - 1].id;
// while our item are above the viewport, we enumerate
for (var i = 0, l = this.names.length; i < l; i++) {
if (this.names[i].offset > scroll) {
articleID = this.names[i - 1].id;
break;
}
}
// we've got the content to highlight, let's add classes and expand menu-entries
var sectionID = articleID.split('.')[0],
page = this.page,
nav = page.nav;
if (sectionID !== page.section) {
nav.filter('.nav_' + page.section).removeClass('active');
nav.filter('.nav_' + sectionID).addClass('active');
this.expand(sectionID);
page.section = sectionID;
}
if (articleID !== page.article) {
nav.find('a[href="#' + page.article + '"]').removeClass('active');
nav.find('a[href="#' + articleID + '"]').addClass('active');
page.article = articleID;
this.mobile(articleID);
}
}
During the initialization they find out what each part takes in height
init: function(attribute) {
this.heights = this.page.nav.find('ul').map(function(idx, ele) {
return $(this).outerHeight();
}).get();
From these two pieces of info, they can highlight the correct entry to what the user is looking at, by attaching the function to the scroll, resize, etc... events of the window.
You can do that via html and css. They use a hover style for each entry and then link to html content via named anchors. You can see that in the address bar when you click on link.
E.g.:
TOC Entry:
<code>hasOwnProperty</code>
Content Body:
<a name="object.hasownproperty"></a>
<!-- HTML Content here -->
Of course, if you want nice animation and stuff, use something like
http://www.position-absolute.com/articles/better-html-anchor-a-jquery-script-to-slide-the-scrollbar/ or http://css-plus.com/2011/03/plusanchor-jquery-plugin/
Update:
To Achieve highlighting (pseudocode):
Keep a tab of all your sections
Attach an onscroll event handler to the body
onscroll, check the scrollTop to each section's top
If match found, remove highlight class from previous TOC entry and add it to new TOC entry.
You can name your TOC anchors such a way that they match the section's id. Then you can easily retrieve corresponding TOC entry by just saying #id and add your class to it.