I would like to have a Jquery UI tab with top and button menu function, is it possible to do that ?
(the content are loaded via ajax ,what i mean is the top tab and bottom tab both at the same time.)
<script type="text/javascript" charset="utf-8">
$(function() {
$( "#tabs" ).tabs({
ajaxOptions: {
error: function( xhr, status, index, anchor ) {
$( anchor.hash ).html(
"Couldn't load this tab. We'll try to fix this as soon as possible. " +
"If this wouldn't be a demo." );
}
},
cookie: {
// store cookie for a day, without, it would be a session cookie
expires: 1
}
});
});
</script>
<div id="tabs">
<ul id="top">
<li>top 1</li>
<li>top 2</li>
</ul>
<ul id="bottom">
<li>bottom 1</li>
<li>bottom 2</li>
</ul>
</div>
Thank you in advance!
I am a bit confused about what you want to achieve, but if you are trying to make similiar layout as I am in jQuery UI tabs - how to change tab position ,then if you dont mind having the tabs layout of fixed height, then you can simply move the tabs by css as I did here http://jsfiddle.net/L6QjK/2/
If you DO mind the fixed height, my only idea so far is to create layout with one control panel, than add some <div> looking as control panel and move some tabs after initialization from the code by usinge something like this:
$("#yourFakeControlPanel").append($(".ui-tabs-nav").find("#yourTab"));
$(".ui-tabs-nav").find("#yourTab").remove();
This was working when all the tabs were static, but I have ran to some errors, when adding new tabs dynamicaly, so consider this as a hint not as an exact answer
I think i have finaly found your answer. Look to my post, I have written there how to make tabs on the top and bottom same time jQuery UI tabs - how to change tab position
and if zou find this helpful, mark this as an answer to lead others to the right sollution
Related
I'm making a site and i haven't been able to figure out how to highlight a certain div without everything blowing out of proportion. I want the top nav where it says home, sitemap, and contact to highlight a div in the footer. When you click contact i want it have you dragged down to the bottom where it is but i want it to highlight the contact div just to get your attention real quick so its easier to find. i tried some plugins but they didnt work to well.
Site
<div id="navContainer">
<div id="nav">
<ul>
<li>Home</li>
<li>Site Map</li>
<li>Contact</li>
</ul>
</div>
Using jQuery, add an id to the contact button like contact and one to the ul like contactUL then this works. Here is a jsFiddle
$("#contacter").click(function() {
$(window).scrollTop($(document).height());
$("#contact").css("background-color", "yellow");
});
Something like this perhaps:
http://jsfiddle.net/E6h5u/1
// on click of a nav element with class scroll
$('nav .scroll').click(function () {
// select the corresponding footer element
// (you may want to work with a class or data attribute, in stead of basing on the content)
var $footer = $('footer a:contains(' + $(this).text() + ')');
// scroll to it
$("body").animate({
scrollTop: $footer.offset().top
}, "slow", function () {
// when the scroll is ready, add a highlight class
$footer.addClass('highlight');
// wait some, and remove the class again
setTimeout(function() { $footer.removeClass('highlight'); }, 1000);
});
});
I put the explanation in the code comments, but feel free to ask.
Note that I used a class with a css transition for the highlighting, but you could also use some jQuery animation if you prefer (for legacy browser compatibility with the css transition perhaps...)
Gotta use javascript (and preferably JQuery, as the previous poster said). Here is a working Fiddle showing how you could could go about this.
http://jsfiddle.net/HerrLoop/eBxyM/1/
$('#nav ul li:nth-child(3) a').click(function(){
$('#footer .contact').addClass('highlight');
});
Ok, So I've ade a static version of a piece of functionality and it works fine. When a user hovers over a div the content scrolls into it over a picture.
Now I needed multiple of these, accessible via tabs. To save loading time the content in these tabs (copies of the static version) are brought in with a .get from another html file.
The structure of my separate html files is the same as the default tab which is working, I hover over the one stats there on page load and it works, once i change tab, the old content is faded out, and the new content is faded i correctly. All the class names are the same as is the structure, but when I hover over these elements that were brought in none of it runs.
Do I have to do something special for .hover to work on content that's dynamically brought in via .get after the page has loaded?
Yes, you have to instantiate the hover after callback of the get method.
You'll need to use event delegation. Read up on the "Direct and Delegated Events" section here.
Use something like this:
$("#tabs_content_container").on({
mouseenter: function (e) {
},
mouseleave: function (e) {
}
}, ".target-class");
where your HTML structure is something like:
<div id="tabs_container">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<div id="tabs_content_container">
</div>
</div>
and your code already is doing something like:
$("#tabs_container").on("click", function () {
$.get($(this).attr("href"), function (data) {
$("#tabs_content_container").html(data);
});
});
Reference:
http://api.jquery.com/on/#direct-and-delegated-events
I am using contextmenu.js (jQuery context menu plugin) for opening the context menu on right clicking of div. But somehow only default menu is opening. I am not able to locate the exact problem.
On debugging, it is showing that on its right click it is attaching the context menu to div. But when I right click div, default menu opens.
I know I am providing very limited information but any suggestion and help will be appreciable.
I think you should do something like this, if that is your element that should get the menu
<div id="item-1">This should have a menu</div>
Then your javascript should look like this:
$(document).ready( function() {
$('#item-1').contextMenu({
menue: 'menueName'
},
function(action, el, pos) {
// do sth when the menu was clicked
alert('Action ' + action + ' was clicked on ' + $(el).attr('id'));
});
});
The menue itselfe should defined in a list like:
<ul id="#menueName" class="contextMenu">
<li class="action1">
<a href="#action1>Action 1</a>
</li>
<li class="action1">
<a href="#action2>Action 2</a>
</li>
</ul>
Also make sure you have jQuery 1.3 or above included in your page.
I had the same problem.
Replacing if(jQuery)( function() { at the beginning of jquery.contextMenu.js with (function($, undefined){ fixed the problem. I hope that helps.
This is driving me absolutely insane. I am building a very customized slider jQuery plugin for a project. One of my requirements is that users must be able to deep link into a specific slide. So naturally all of my slides have hash tags and the navigation links have corresponding hashtags. My problem is that the default functionality of the hash tag links are firing on top of my sliding animation triggered by javascript. That is, instead of sliding to slide 4 it jumps immediately to slide 4 and then animates to slide 8. This is despite using every trick I can think of to prevent the default functionality. Here is the snippet of code in question.
$(slider.nav).bind( 'click', function(event) {
event.preventDefault();
if( !$(this).hasClass('active') ) {
var target = slider.nav.index( $(this) );
slider.animate( target );
}
});
As you can see here I have used event.preventDefault(). I have also tried returning false. No luck whatsoever. Any ideas?
It's hard to say without seeing the HTML. But if it's the way I imagine it, you don't need to keep href="#" in a link if it's not going anywhere. You can use jQuery to just get the next slide, or get slide number 7 without relying on href="#" links.
Instead, you can do something like:
<ul id="slideshow">
<li id="slide_1">Slide 1</li>
<li id="slide_2">Slide 2</li>
<li id="slide_3">Slide 3</li>
</ul>
<a class="slide_nav" data-index="1">1</a>
<a class="slide_nav" data-index="2">2</a>
<a class="slide_nav" data-index="3">3</a>
<a class="slide_nav" data-index="4">4</a>
And in the JS, do something like:
$('.slide_nav').click(function() {
var slides = $('#slideshow li'); // get all slides
var target_id = $(this).data('id') - 1; // Get the current ID and then subtract 1 (index starts at 0)
slider.animate(slides[target_id]);
});
Anyway, that's more like a pseudo-example than anything else, and I'm not sure that would work as-is, but the code should hopefully point you in a direction that would avoid using href="#" and thus avoid the problem you're having now.
Good luck.
Oh jeeze. I'm really sorry. I've wasted everyone's time.
Apparently another developer who was working on the site had added some javascript elsewhere roughly to the effect of
if( window.location.hash ) {
window.location = window.location.hash;
}
No idea why they would add such a thing. Sorry!
I have a (parent) window containing JQuery tabs:
<div id="tabs">
<ul class="tabHeader">
<li><a href="?ctrl=doSomething" title="#tabs-something">
Awesome function</a></li>
<li><a href="?ctrl=showSettings" title="#tabs-showSettings">
Settings</a></li>
</ul>
</div>
Within #tabs-showSettings, I require in certain cases a new window, which I open using the following code:
window.open('?control=showSetting&server='+server,
'serverSettings','width=400');
That works fine. But within this window, I require a function to submit the entered data (works correctly), refresh the div within the parent (fails) and close the child window (works). That's what I tried:
// #1: the following would refresh the div within the child ;(
parent.$('div#tabs-showSettings').load('?control=showSettings');
// #2: the following doesn't seem to have any effect
window.opener.$('div#tabs-showSettings').load('?control=showSettings');
Please tell me what I'm doing wrong. Many, many thanks!
Solution:
$("div#tabs-showSettings", window.opener.document).load(
"?control=showSettings", function(){
window.close();
});
Try parent as the context:
$("div#tables-showSettings", window.opener.document)
.load("?control=showSettings");
Update:
Some of the comments following suggested the need to have the window close after the updates are done - that should be handled in the callback:
$("div#tables-showSettings", window.opener.document)
.load("?control=showSettings", function() { window.close(); });