I have a slider on that page:
http://en.expo.b24online.com/news/
The js for the silder is:
on the document ready:
$('#newsCarousel').carousel({
interval: 4000
}).on('click', '.list-group li', function() {
clickEvent = true;
$('.list-group li').removeClass('active');
$(this).addClass('active');
}).on('slid.bs.carousel', function(e) {
if(!clickEvent) {
var count = $('.list-group').children().length -1;
var current = $('.list-group li.active');
current.removeClass('active').next().addClass('active');
var id = parseInt(current.data('slide-to'));
if(count == id) {
$('.list-group li').first().addClass('active');
}
}
clickEvent = false;
});
and on the load:
var boxheight = $('#newsCarousel .carousel-inner').innerHeight();
var itemlength = $('#newsCarousel .item').length;
var triggerheight = Math.round(boxheight/itemlength+1);
$('#newsCarousel .list-group-item').outerHeight(triggerheight);
$('.media-img').height(boxheight);
It works fine on some places, but on this website, I have the:
$('#newsCarousel .carousel-inner').innerHeight();
to be 133, and this makes all the other dimensions calculate in the load function wrong.
I couldn't find where this 133 come from and how to fix it.
Thank you for your help.
.innerHeight() method is not applicable to window and document objects; for these, use .height() instead.
eg:
$('#newsCarousel .carousel-inner').height();
Hope it will help.
Related
I coded JS code to restructure html list items for responsive usage:
$(window).resize(function() {
if ($(window).width() <= 640) {
$(function resizenav() {
var lis = $('.menu-header-menu-container ul li:gt(1)').clone();
$('.menu-header-menu-container ul li:gt(1)').remove();
var newLI = $('<li class="toggle-dropdown">more+</li>')
var newUL = $('<ul class="nested"></ul>');
$('.menu-header-menu-container ul').append(newLI);
$(".toggle-dropdown a").append(newUL);
newUL.append(lis);
});
} else if ($(window).width() > 640) {
//destroy function resizenav()
}
});
Code snippet: https://jsfiddle.net/3o32rj1m/3/
I am seeking a way to destroy resizenav() and restore back the navigation original html structure. Any help is much appreciated?
I came up with a solution too... sorry for the delay. Here's the gist:
var isSmall = false;
$(window).on('load resize', function(){
if(!isSmall && $(window).width() <= 640){
var extraListItems = $('#menu-header-menu > li:gt(1)');
if(extraListItems.size() > 0){
var subList = $('<ul>').addClass('nested-list').append(extraListItems).css('display', 'none');
var toggle = $('<li>').addClass('toggle-nested-list').append("<span class='toggle-text'>more+</span>")
.on('click', function(){
subList.toggle();
if(subList.is(':visible')){ $(this).find('.toggle-text').text('less-'); }
else{ $(this).find('.toggle-text').text('more+'); }
});
toggle.append(subList).appendTo('#menu-header-menu');
}
isSmall = true;
}
else if(isSmall && $(window).width() > 640){
var listItems = $('#menu-header-menu .nested-list li');
listItems.appendTo('#menu-header-menu');
$('#menu-header-menu .toggle-nested-list').remove();
isSmall = false;
}
});
Hopefully I didn't miss anything when copying and pasting my code from jsFiddle, but I've got it all there for sure, with comments. Make sure you just resize the output frame in jsFiddle, as resizing the entire browser window has some strange effects there... https://jsfiddle.net/m4n41wkc/
Try this:
var flag = false;
var original = $('.menu-header-menu-container ul').clone().html();
function resizenav() {
var lis = $('.menu-header-menu-container ul li:gt(1)').clone();
$('.menu-header-menu-container ul li:gt(1)').remove();
var newLI = $('<li class="toggle-dropdown">more+</li>')
var newUL = $('<ul class="nested"></ul>');
$('.menu-header-menu-container ul').append(newLI);
$( ".toggle-dropdown a" ).append(newUL);
newUL.append(lis);
};
$(window).resize(function() {
if ($(window).width() <= 640) {
if(!flag) {
resizenav();
flag = true;
}
} else if ($(window).width() > 640) {
if(flag){
$('.menu-header-menu-container ul').html(original);
flag = false;
}
}
});
I am calling a page with a hash in the url so that when it is submitted in the browser the the element with the hash id is clicked. It works fine, but I need the page to immediately scroll to the top after the click. I have tried: $(window).scrollTop(0); but it only seems to work if the page is already loaded.
Here is the Javascript:
<script type="text/javascript">
var thisHash = window.location.hash;
$(document).ready(function()
{
if(window.location.hash)
{
$(thisHash).trigger('click');
}
});
</script>
When I have a url like http://www.example.com#part2 and run it in the browser the element with the hash #part2 is clicked correctly, but the page is scrolled to the element. I would like the page to be scrolled to the top of the page after the element is clicked.
Do you know a way to scroll to the top afterward or have the click "not scroll" to the element to start with?
I have tried the setTimeout function and $(window).scrollTop(0); but they don't seem to work after the click and the page load.
$(window).scrollTop(0); works when I manually run it in the console of chrome after the page is already loaded.
It seems like the $(window).scrollTop(0); gets ignored for some reason.
I think you want to do something like this check out this js fiddle
JSFiddle
code
function scrollnav(){
$('#nav a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 1000, function () {
window.location.hash = target;
});
});
var aChildren = $("ul#nav li").children(); // find the a children of the list items
var aArray = []; // create the empty aArray
for (var i=0; i < aChildren.length; i++) {
var aChild = aChildren[i];
var ahref = $(aChild).attr('href');
aArray.push(ahref);
}
var windowPos = $(window).scrollTop(); // get the offset of the window from the top of page
for (var i=0; i < aArray.length; i++) {
var theID = aArray[i];
var divPos = $(theID).offset().top; // get the offset of the div from the top of page
var pos = $("a[href='" + theID + "']").parent();
if (windowPos >= divPos ) {
$("ul#nav li").removeClass("active");
$(pos).addClass("active");
var finder = $("ul#nav li.active").index();
size =$('ul#nav li').width();
var onclick = finder * size;
$('span').css('left', onclick + 'px');
}
}
}
$(window).scroll(function() {
scrollnav()
});
scroll top on page reload
Check JS fiddle here
code
$(window).load(function(){
//alert("scroll")
$('html, body').stop().animate({
'scrollTop': 0
}, 1000)
})
Try
window.scroll(0, 0); // X, Y
or
window.scrollBy(0, -document.body.scrollTop)
I can't figure out why the hyperlinks wont work when using a jQuery click event.
I would like 1 button to work as a link
and one as a jump to in the current page.
div class="shortcat">
<i class="icon-thumbs-up"></i>Test Now
<i class="icon-picture"></i>Learn More
</div>
//--------- jQuery ---------------//
jQuery(window).load(function() {
jQuery("#loaderInner").fadeOut();
jQuery("#loader").delay(400).fadeOut("slow");
$('.teaserTitle ').stop().animate({marginTop :'330px', opacity:"1"}, 1000, 'easeOutQuint');
$('.shortcat a ').stop().animate({marginTop :'65px', opacity:"1"}, 600, 'easeOutQuint');
});
$(document).ready(function(){
$("#mainNav ul a, .logo a, .shortcat a, .notBtn a").click(function(event){
event.preventDefault();
var full_url = this.href;
var parts = full_url.split("#");
var trgt = parts[1];
var target_offset = $("#"+trgt).offset();
var target_top = target_offset.top;
$('html,body').animate({scrollTop:target_top -80}, 800);
});
//-------------Highlight the current section in the navigation bar------------//
var sections = $("section");
var navigation_links = $("#mainNav a");
sections.waypoint({
handler: function(event, direction) {
var active_section;
active_section = $(this);
if (direction === "up") active_section = active_section.prev();
var active_link = $('#mainNav a[href="#' + active_section.attr("id") + '"]');
navigation_links.removeClass("active");
active_link.addClass("active");
},
offset: '35%'
});
First part is the HTML the second part is my script.js
I think the click function event is wrong.
When i remove the shortcut out of it the hyperlink will work but the jump to not anymore.
Will there be an easy fix?
here you go: this works well
http://jsfiddle.net/6g4j2/
$(document).ready(function(){
$("#mainNav ul a, .logo a, .shortcat a, .notBtn a").click(function(event){
var full_url = this.href;
var parts = full_url.split("#");
var trgt = parts[1];
if (trgt != undefined) {
event.preventDefault();
var target_offset = $("#"+trgt).offset();
var target_top = target_offset.top;
$('html,body').animate({scrollTop:target_top -80}, 800);
return false;
}
});
});
most likely the function from the click event fails here
var trgt = parts[1];
for the first link, because parts will be undefined
Let's say we've got this HTML:
<div class="locationhash" data-position="0"></div>
<div class="locationhash" data-position="1000"></div>
<div class="locationhash" data-position="3000"></div>
<div class="locationhash" data-position="5000"></div>
<div class="locationhash" data-position="8000"></div>
where data-positions value, in normal conditions would equal to elements height from pages top in px.
Im retrieving elements with .locationhash, reading its data-position and pushing both values as an object into an array using this code. (works as intended, output in third code sample here)
var getSections = function() {
var pageSectionsArr = [];
var pageSections = (document).querySelectorAll('.locationhash');
Array.prototype.forEach.call(pageSections, function(section) {
var getSectionPos = section.getAttribute('data-position');
var pageSectionObj = {
pageSection : section,
pageSectionPos : getSectionPos
};
pageSectionsArr.push(pageSectionObj);
});
console.log(pageSectionsArr)
};
(function recalcSectionPos() {
$(window).resize(function() {
getSections();
});
})();
Output looks like this:
[ {div.locationhash, value of its data-position},
{div.locationhash, value of its data-position}, ... ]
Now i need to check on scroll wether current window.scrollTop() equals any of data-position values so:
$(window).scroll(function() {
var hFromTop = $(window).scrollTop()
//cant figure out what should i do next (jquery allowed)
});
Question: How could i check current window.scrolltop() against multiple values, while user is scrolling so i could make something happen when window.scroll top equals to a value
(I'm using this array because later im gonna read .locationhash's id in order to append it to url using location replace)
DEMO
$(document).ready(function () {
$(document).on("scroll", onScroll);
//smoothscroll
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");
$('a').each(function () {
$(this).removeClass('active');
})
$(this).addClass('active');
var target = this.hash,
menu = target;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top+2
}, 500, 'swing', function () {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
});
function onScroll(event){
var scrollPos = $(document).scrollTop();
$('#menu-center a').each(function () {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
$('#menu-center ul li a').removeClass("active");
currLink.addClass("active");
}
else{
currLink.removeClass("active");
}
});
}
I followed #tushar gupta's advice, also wrapped it in a function checking wether scrolling ended
$(window).scroll(function() {
clearTimeout($.data(this, 'scrollTimer'));
$.data(this, 'scrollTimer', setTimeout(function() {
var hFromTop = $(window).scrollTop();
$.each(pageSectionsArr, function(obj) {
console.log(this + 'is sparta')
if (~~this.pageSectionPos <= hFromTop && ~~this.pageSectionPos + this.pageSection.offsetHeight > hFromTop) {
//console.log(this.pageSectionPos)
var sectionsId = this.pageSection.id
//console.log(sectionsId)
window.location.replace('#/'+sectionsId)
};
});
}, 250));
});
I am trying to hide each and every element of document when window is resized to some pixels.
This is what i tried to script-
When window is resized to some pixels then each document goes hidden else shown.
I tried implementing this script-
<script type="text/javascript">
$(function () {
var eachdoc=$(document).each();
var docsize = eachdoc.width();
$(window).resize(function () {
$(document).each(function () {
if (docsize > $(window).width()-400) {
$(this).hide();
}
else {
$(this).show();
}
});
});
});
</script>
Well this script is not working, How can i improve this script to hide each element on window resize?
Please suggest !
The basic implementation could be something like
$(function () {
var els=$('.mytable, .mypara');//list of elements
var docsize = eachdoc.width();
$(window).resize(function () {
var cuttoff = $(window).width() - 400;
els.each(function (idx, el) {
var $this = $(this);
if ($this.width() > cuttoff) {
$this.hide();
} else {
$this.show();
}
});
});
});
I'm not certain that this is the best solution or even a good solution, so somebody correct me as needed.. but I'm thinking this way will be a little easier on your cpu.
$.fn.filterNumberRange = function(item, low, high){
return this.filter(function(){
var value = +$(this).attr(item);
return value >= low && value <= high;
});
};
var documents = $('document-selector');
$(documents).each(function(){
$(this).attr('data-width', $(this).width());
});
$(window).resize(function(){
var current-width = parseInt($(window).width()) - 400;
$(documents).filterNumberRange( 'data-width', 0, current-width ).show;
$(documents).filterNumberRange( 'data-width', current-width + 1, 9999 ).hide;
});
Grabbed the filtering function from here:
http://forum.jquery.com/topic/new-attribute-selectors-for-less-than-and-greater-than