EDIT: I have done some troubleshooting to help and try determine where the problem may lay... If the "personal" link is clicked and personal/personal.html allowed to follow through as a normal link would it executes flawlessly every time. The problem seems to be from the insetting of /personal/personal.html into the #content_container of index.html... Firefox seems to be more temperamental than chrom with this issue. /Edit
Live Example: http://www.dstpc.ca/Beta/index.html
I am using a premade Tabs JQuery and CSS file to accomplish the look and functionality I am seeking.
So far I have been able to reference the JQuery and CSS files and replace the content of 1 div with an html document while sliding up or sliding down another div to which causes a bottom boarder to be drawn or erase depending on the link followed. These actions below happen without fail, consistently accurately.
What is happening is that "personal.html" will occasionally and unpredictably not properly call to the JQuery or CSS file. So that there are no tabs or formatting just black text in headings and div's. I will add that the first load works pretty much every time but I would like to avoid a simple refresh method so that data stays a low as possible and speed is fast. I find that subsequent clicks between "Home" and "Personal" to test functionality follow no rhyme to my reason as to when or if it will call the JQuery or CSS file.
Sometimes I see when "personal.html" is loading in the midst of the transition the HTML version loads and I can see the plain text but then the document calls the JQuery and CSS and it snaps into format. I am wondering if this is the main issue? Would delaying the content from loading until after the page formatting is called and the scripts are ran could resolve the issue. If so how would I implement that solution?
I have included the Responsive Tab JQuery document I am referencing. If more code or sources are needed please let me know and I will add them. personal.html is also included.
My own JQuery script:
$(".home_button").live('click', function() {
$("#content_container").load("./index.html #drill_banner")
$("#info").slideDown(1000, function() {
$("menu").css("border-bottom", "#F93 2px Solid")
})
return false;
});
$(".personal_info").live('click', function() {
$("#content_container" ).load("personal/personal.html")
$("#info").slideUp(1000, function() {
$("menu").css("border-bottom", "#F93 0px Solid")
})
return false;
});
personal.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="../css/responsive_tabs.css">
<link rel="stylesheet" type="text/css" href="../css/style.css">
</head>
<body>
<div class="responsive-tabs">
<h2>Personal Technology Services</h2>
<h2>On-Site</h2>
<div>This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text. This is a body of text.
</div>
<h2>In-Shop</h2>
<div>
Content for Tab 3
</div>
<h2>
Remote Service</h2>
<div>
Content for Tab 3
</div>
</div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js">
</script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js">
</script>
<script type="text/javascript" src="../js/responsive_tabs.js">
</script>
<script type="text/javascript" src="../js/script.js">
</script>
<script>
$(function() {
RESPONSIVEUI.responsiveTabs();
})
</script>
</body>
</html>
Responsive Tabs JQuery
/* ----------------
ResponsiveTabs.js
Author: Pete Love | www.petelove.com
Version: 1.10
------------------- */
var RESPONSIVEUI = {};
(function($) {
RESPONSIVEUI.responsiveTabs = function () {
var $tabSets = $('.responsive-tabs');
if (!$tabSets.hasClass('responsive-tabs--enabled')) {
// if we haven't already called this function and enabled tabs
$tabSets.addClass('responsive-tabs--enabled');
//loop through all sets of tabs on the page
var tablistcount = 1;
$tabSets.each(function() {
var $tabs = $(this);
// add tab heading and tab panel classes
$tabs.children(':header').addClass('responsive-tabs__heading');
$tabs.children('div').addClass('responsive-tabs__panel');
// determine if markup already identifies the active tab panel for this set of tabs
// if not then set first heading and tab to be the active one
var $activePanel = $tabs.find('.responsive-tabs__panel--active');
if(!$activePanel.length) {
$activePanel = $tabs.find('.responsivetabs__panel').first().addClass('responsive-tabs__panel--active');
}
$tabs.find('.responsive-tabs__panel').not('.responsive-tabs__panel--active').hide().attr('aria-hidden','true');
//hide all except active panel
$activePanel.attr('aria-hidden', 'false');
/* make active tab panel hidden for mobile */
$activePanel.addClass('responsive-tabs__panel--closed-accordion-only');
// wrap tabs in container - to be dynamically resized to help prevent page jump
var $tabsWrapper = $('<div/>', {'class': 'responsive-tabs-wrapper' });
$tabs.wrap($tabsWrapper);
var highestHeight = 0;
// determine height of tallest tab panel. Used later to prevent page jump when tabs are clicked
$tabs.find('.responsive-tabs__panel').each(function() {
var tabHeight = $(this).height();
if (tabHeight > highestHeight) {
highestHeight = tabHeight;
}
});
//create the tab list
var $tabList = $('<ul/>', { 'class': 'responsive-tabs__list', 'role': 'tablist' });
//loop through each heading in set
var tabcount = 1;
$tabs.find('.responsive-tabs__heading').each(function() {
var $tabHeading = $(this);
var $tabPanel = $(this).next();
$tabHeading.attr('tabindex', 0);
// CREATE TAB ITEMS (VISIBLE ON DESKTOP)
//create tab list item from heading
//associate tab list item with tab panel
var $tabListItem = $('<li/>', {
'class': 'responsive-tabs__list__item',
id: 'tablist' + tablistcount + '-tab' + tabcount,
'aria-controls': 'tablist' + tablistcount +'-panel' + tabcount,
'role': 'tab',
tabindex: 0,
text: $tabHeading.text(),
keydown: function (objEvent) {
if (objEvent.keyCode === 13) { // if user presses 'enter'
$tabListItem.click();
}
},
click: function() {
//Show associated panel
//set height of tab container to highest panel height to avoid page jump
$tabsWrapper.css('height', highestHeight);
// remove hidden mobile class from any other panel as we'll want that panel to be open at mobile size
$tabs.find('.responsive-tabs__panel--closed-accordion-only').removeClass('responsive-tabs__panel--closed-accordion-only');
// close current panel and remove active state from its (hidden on desktop) heading
$tabs.find('.responsive-tabs__panel--active').toggle().removeClass('responsive-tabs__panel--active').attr('aria-hidden','true').prev().removeClass('responsive-tabs__heading--active');
//make this tab panel active
$tabPanel.toggle().addClass('responsive-tabs__panel--active').attr('aria-hidden','false');
//make the hidden heading active
$tabHeading.addClass('responsive-tabs__heading--active');
//remove active state from currently active tab list item
$tabList.find('.responsive-tabs__list__item--active').removeClass('responsive-tabs__list__item--active');
//make this tab active
$tabListItem.addClass('responsive-tabs__list__item--active');
//reset height of tab panels to auto
$tabsWrapper.css('height', 'auto');
}
});
//associate tab panel with tab list item
$tabPanel.attr({
'role': 'tabpanel',
'aria-labelledby': $tabListItem.attr('id'),
id: 'tablist' + tablistcount + '-panel' + tabcount
});
// if this is the active panel then make it the active tab item
if($tabPanel.hasClass('responsive-tabs__panel--active')) {
$tabListItem.addClass('responsive-tabs__list__item--active');
}
// add tab item
$tabList.append($tabListItem);
// TAB HEADINGS (VISIBLE ON MOBILE)
// if user presses 'enter' on tab heading trigger the click event
$tabHeading.keydown(function(objEvent) {
if (objEvent.keyCode === 13) {
$tabHeading.click();
}
});
//toggle tab panel if click heading (on mobile)
$tabHeading.click(function() {
// remove any hidden mobile class
$tabs.find('.responsive-tabs__panel--closed-accordion-only').removeClass('responsive-tabs__panel--closed-accordion-only');
// if this isn't currently active
if (!$tabHeading.hasClass('responsive-tabs__heading--active')){
var oldActivePos,
$activeHeading = $tabs.find('.responsive-tabs__heading--active');
// if there is an active heading, get its position
if($activeHeading.length) {
oldActivePos = $activeHeading.offset().top;
}
// close currently active panel and remove active state from any hidden heading
$tabs.find('.responsive-tabs__panel--active').slideToggle().removeClass('responsive-tabs__panel--active').prev().removeClass('responsive-tabs__heading--active');
//close all tabs
$tabs.find('.responsive-tabs__panel').hide().attr('aria-hidden','true');
//open this panel
$tabPanel.slideToggle().addClass('responsive-tabs__panel--active').attr('aria-hidden','false');
// make this heading active
$tabHeading.addClass('responsive-tabs__heading--active');
var $currentActive = $tabs.find('.responsive-tabs__list__item--active');
//set the active tab list item (for desktop)
$currentActive.removeClass('responsive-tabs__list__item--active');
var panelId = $tabPanel.attr('id');
var tabId = panelId.replace('panel','tab');
$('#' + tabId).addClass('responsive-tabs__list__item--active');
//scroll to active heading only if it is below previous one
var tabsPos = $tabs.offset().top;
var newActivePos = ($tabHeading.offset().top) - 15;
if(oldActivePos < newActivePos) {
$('html, body').animate({ scrollTop: tabsPos }, 0).animate({ scrollTop: newActivePos }, 400);
}
}
// if this tab panel is already active
else {
// hide panel but give it special responsive-tabs__panel--closed-accordion-only class so that it can be visible at desktop size
$tabPanel.removeClass('responsive-tabs__panel--active').slideToggle(function () { $(this).addClass('responsive-tabs__panel--closed-accordion-only'); });
//remove active heading class
$tabHeading.removeClass('responsive-tabs__heading--active');
//don't alter classes on tabs as we want it active if put back to desktop size
}
});
tabcount ++;
});
// add finished tab list to its container
$tabs.prepend($tabList);
// next set of tabs on page
tablistcount ++;
});
}
};
})(jQuery);
Thank you for your time
Looks like you need to allow listen for the load() to complete. eg in this snippet :
$("#content_container").load("./index.html #drill_banner", function() {
$("#info").stop().slideDown(1000, function() {
$("menu").css("border-bottom", "#F93 2px Solid");
});
});
Try that and see how it goes
Related
I have a standard tabbed layout on a page. Screenshot of example below.
Problem is each tab has a different height. So easiest solution I can find is to check when the input tab ID is selected, and then force a css height to the div behind it. This fixes the problem very nicely. This is the code I am using:
<script type='text/javascript'>
window.onload = function () {
document.getElementById('tab1').onclick=function() {
$("#internalcontainer").css("height","2600px");
}
document.getElementById('tab2').onclick=function() {
$("#internalcontainer").css("height","1000px");
}
document.getElementById('tab3').onclick=function() {
$("#internalcontainer").css("height","1200px");
}
document.getElementById('tab4').onclick=function() {
$("#internalcontainer").css("height","1200px");
}
document.getElementById('tab5').onclick=function() {
$("#internalcontainer").css("height","600px");
}
document.getElementById('tab6').onclick=function() {
$("#internalcontainer").css("height","2400px");
}
document.getElementById('tab7').onclick=function() {
$("#internalcontainer").css("height","800px");
}
}
</script>
Unfortunately this does not trigger the first input tab since when page loads the user is not selecting the tab - the first tab shows as default on page load.
How would I create a fallback where if no tab inputs are selected, revert to tab1 ID? Something like:
if tab1 selected = do this
if tab2 selected = do that
else = tab1 rule is selected
Not seeing your HTML, I would think you could so something like this
$function () {
$('.tab').on("click",function() { // any tab, use class="tab"
$("#internalcontainer").height($(this).parent().find(".someDiv").height());
}).eq(0).click(); // trigger the first onload or look at the URL
});
On page load, make the tab selected and set the height. After this go on to attach your event listeners.
window.onload = function () {
//set the height as default on page load.
$("#internalcontainer").css("height","2600px");
//add the selected class to tab1
$('#tab1').addClass('selected');
//Attach rest of the event listener as you wanted.
document.getElementById('tab1').onclick=function() {
................
}
I am not a jquery specialist but I have managed to make this script working on my website:
<script>
$(document).ready(function() {
$('#open_#div_hidden_1').click(function() {
if ($('#div_hidden_1').is(':hidden')) {
$('#div_hidden_1').show(500);
$('#div_hidden_1').hide(500);
} else {
$('#div_hidden_1').hide(500);
}
});
});
</script>
Basicly it displays and collapses a div (distinguished by id), I have many divs on my wbesite that are displayed this way(its an inline code, for each div separate code) What I would like to do with it is to close all other divs (e.g. from the same class) when I open another one. Could please someone help me to modify this code so that it will collapse all other divs form the same class?
If you have multiple DIVs and class like below,
<div class="divClass">A</div>
<div class="divClass">B</div>
<div class="divClass">C</div>
then, you need to use like,
$(".divClass").click(function(){
$(".divClass").hide(500); //hiding all the element with divClass
$(this).show(500); // showing up the clicked element.
});
This might be able to you
Reference
Just a part of code
$(".header").click(function () {
$(".header").not(this).text('Expand').next().slideUp();
$header = $(this);
//getting the next element
$content = $header.next();
//open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
$content.slideToggle(500, function () {
//execute this after slideToggle is done
//change text of header based on visibility of content div
$header.text(function () {
//change text based on condition
return $content.is(":visible") ? "Collapse" : "Expand";
});
});
});
I am new to JQuery. I'm using a menu bar shown in the following link
http://tympanus.net/Tutorials/UIElements/LargeDropDown/
The source code can be downlloaded from
http://tympanus.net/codrops/2010/07/14/ui-elements-search-box/
I have attatched the code and files to my project.
The problem is that when i first open the page, it showing the contents in the right way as shown in the image below
and on mouse enter the list item expands and shows the sub details below correctly
but when i move the mouse away from the item, the text overflows and comes down. if it is a single word then there is no problem but it there are two or more words this happens. You can see this in the image below
I'm also giving the javascript code
<!-- The JavaScript -->
<script type="text/javascript" src="Styles/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
/**
* the menu
*/
var $menu = $('#ldd_menu');
/**
* for each list element,
* we show the submenu when hovering and
* expand the span element (title) to 510px
*/
$menu.children('li').each(function () {
var $this = $(this);
var $span = $this.children('span');
$span.data('width', $span.width());
$this.bind('mouseenter', function () {
$menu.find('.ldd_submenu').stop(true, true).hide();
$span.stop().animate({ 'width': '510px' }, 300, function () {
$this.find('.ldd_submenu').slideDown(300);
});
}).bind('mouseleave', function () {
$this.find('.ldd_submenu').stop(true, true).hide();
$span.stop().animate({ 'width': $span.data('width') + 'px' }, 300);
});
});
});
</script>
Can you please help me out???
You could try to add a min-width via CSS for your li (W3School min-width). The following code affects all your li coming after your ul with the id ldd_menu.
#ldd_menu li {
min-width:200px
}
You could also use for only one specific li.
<li style="min-width:200px">
Or via jquery in your each-block (jQuery CSS)
$span.css("min-width", "200px");
I have a list of a list that uses jquery toggle and slideToggle so that when items are clicked on, explanatory text slides out and the class changes on the h3. The html for the items looks like:
<li><h3>What do I know about javascript?</h3>
<div class="check_list_wrap feature1">Not a lot, apparently.</div>
</li>
I included the jquery files and then write this in the header:
<script type="text/javascript">
$(function() {
$("#listfeatures h3 a").toggle(function(){
$(this).addClass("check_list_selected");
}, function () {
$(this).removeClass("check_list_selected");
});
$("#listfeatures h3 a").click(function() {
$("."+this.id).slideToggle('fast');
return false;
});
});
</script>
This makes it so that if a link is clicked on, it will toggle the class change of the h3, the display:block/display:inline and the sliding out of the div. It works fine.
BUT, now I want it so that with a url like index.php#feature1, the toggling for that list item will be activated as if it'd been clicked on. I know I need to use location.hash but I'm not sure how to do that. Where should I start?
location.hash contains everything in the URL including and after the hash (#) mark. So, if went to index.php#feature1 and wanted the div with id "feature1" to show on load, you could do
$(document).ready(function() {
if(location.hash) {
var id = location.hash.slice(1); //Get rid of the # mark
var elementToShow = $("#" + id); //Save local reference
if(elementToShow.length) { //Check if the element exists
elementToShow.slideToggle('fast'); //Show the element
elementToShow.addClass("check_list_selected"); //Add class to element (the link)
}
}
});
I want to only show the menu phrases "music, newsletter, contact" fixed at the bottom of the screen. On hover I want them to slide up and reveal hidden content. here's exactly what I mean:
http://sorendahljeppesen.dk/
See the bottom of the screen. Anyone know how this would be accomplished? Thank you.
P.S. also, would anyone know what type of MP3 player that is?
Put your hidden content into a div such as;
<div class="hiddenContent">...</div>
Then give your links at the bottom of the page a class such as;
Music
Then tell the Jquery to show the hidden content when you hover over the link;
$('.bottomLink').hover(
function () {
// Show hidden content IF it is not already showing
if($('.hiddenContent').css('display') == 'none') {
$('.hiddenContent').slideUp('slow');
}
},
function () {
// Do nothing when mouse leaves the link
$.noop(); // Do Nothing
}
);
// Close menu when mouse leaves Hidden Content
$('.hiddenContent').mouseleave(function () {
$('.hiddenContent').slideDown('slow');
});
Try this code:
ASPX section,
<div id="categories-menu" class="hover-menu">
<h2>Categories</h2>
<ul class="actions no-style" style="display: none">
<li>//Place your content here that should show up on mouse over</li>
</ul>
</div>
JQuery section,
<script type="text/javascript">
$(document).ready(function() {
function show() {
var menu = $(this);
menu.children(".actions").slideUp();
}
function hide() {
var menu = $(this);
menu.children(".actions").slideDown();
}
$(".hover-menu").hoverIntent({
sensitivity: 1, // number = sensitivity threshold (must be 1 or higher)
interval: 50, // number = milliseconds for onMouseOver polling interval
over: show, // function = onMouseOver callback (required)
timeout: 300, // number = milliseconds delay before onMouseOut
out: hide // function = onMouseOut callback (required)
});
});
</script>
Hope this helps...
I have found this great article with live demo and source code to download, the article show how to make a slide out menu from bottom.