Recently I asked a question on stackoverflow about multiline tabs. Below is the link
multi-line tabs
I was just wondering if its possible to make them like windows styled tabs, that is if a tab in first line is selected, I want to push it to the second line. The problem I have is I am creating dynamic tabs. Is it possible using Javascript/jquery, to calculate the widths of each tab and determine at which point a second line of tabs would be started?
Thanks
UPDATED added Tab Auto-Resize.
Tested on Chrome / FF
DEMO & SOURCE: http://ask.altervista.org/demo/microsoft-styled-tabs/
$(function() {
setLines();
$('#windows-properties li a').click(function(e) {
e.preventDefault();
var $li = $(this).parent();
$(this.hash).show().siblings('.property-content').hide();
var liTp = parseInt($li.position().top);
if (liTp < lastLiPos) {
$('li.line-' + liTp).wrapAll('<div id="move-lis"></div>');
$('#move-lis').insertAfter('#windows-properties li:last');
$('li.line-' + liTp).unwrap();
setLines();
}
$li.addClass('selected').siblings('li').removeClass('selected');
});
var $lstLi = $('#windows-properties li:last');
var lastLiPos = parseInt($lstLi.addClass('selected').position().top);
$('.property-content:last').show();
});
//.... other part of code in the demo source ...
I don't know how windows does it, but i don't think this will be possible with dynamic tabs. Instead you can create two lists instead of one. Or better still you can use script to make two lists from one, so that both the lists span the entire line width & you don't have to hard code anything.
Related
The title attribute on a particular HTML element is not displayed in my application if viewed in Firefox. There are multiple topics explaining this problem. I was unable to find a sollution that would fit my needs. So I ask if you can please help.
I have a number of divs lined up. On mouseover each of the div's should display a different value(title). The title attribute works fine in Chrome but I need something simillar for Firefox.
The title attribute is set dynamically from Javascript!
My Javascript:
dojo.connect(div, 'mousemove',rasterTimeDisplay);
function rasterTimeDisplay() {
dojo.attr(evt.target, 'title', "some new title");
}
Why not to store the data to be displayed in another attribute ? Because you use javascript to feed your data-storage attribute, you can whatever you want.
For example, with jQuery :
//I feed my data-storage attribute
$("#my_div").attr('my-data', '<h1>my content to be displayed</h1>');
//And then i bind the hover event to toggle displaying of this data
$("#my_div").hover(
function(){
$(this).html($(this).attr('my-data'));
},
function(){
$(this).html('');
}
);
Or with standard JavaScript :
document.getElementById('my_div').my_data = '<h1>my content to be displayed</h1>';
document.getElementById('my_div').onmouseover = function(){
this.innerHTML = this.my_data;
};
document.getElementById('my_div').onmouseoout = function(){
this.innerHTML = '';
};
Sorry if i missunderstood you. However, you are trying to trigger the title attribute on hover? But the title attribute is already triggered by hover on default:
So if you just add the attribute to your desired element, you will get the extra information on hover.
var titles = document.getElementsByClassName('title');
for(var i = 0; i < titles.length; i++)
{
titles[i].title = 'Hover information ' + i;
}
jsFiddle
I you're interesting in the jQuery way to do this:
$('.title').attr('title', 'Hover information');
Still doesn't work?
Step-1: First try to run your firefox client in safe-mode. Your problem might be solved now. If this is the case proceed to step-2. Else... Well i would suggest you to update your grapical driver or install a newer version.
Step-2: Disable your Hardware Acceleration(AH).
Check another answer about this here: https://support.mozilla.org/nl/questions/860902
Now if you just want a work around, to even let the oldest Firefox browsers support this. You can find one here: Tooltips (title="...") won't show in Firefox
I hope this solved your problem.
I need your help at a problem of my Wordpress Webpage. My Wordpress-page is an Single-Page-App with 3 different boxes of content. The left and center boxes are static, the right one changes its content by clicking on links of the other boxes. I decided, to load all the content in the right box and show them with the CSS-command visibility. With a combination of pathJS and JS, i want the URL to change by clicking on the links. So far so good - all works fine, but i dont get managed via my JS-Function to remove the shown-class.
My script looks like this:
<script>
function showDetailContent(showid) {
//suche objekt right_id -> was du zeigen willst -> getelementbyid
alert("1");
var id = document.getElementsByClassName('shown');
alert("2");
id.classList.remove('shown');
alert("3");
document.getElementByID("right_" + showid).classList.add('shown');
alert("4");
}
//var c = document.getElementById('content'); -->do the function :)
Path.map("#/?p=<?php the_id();?>").to(function () {
showDetailContent(<?php the_id();?>);
});
Path.listen();
</script>
The alerts are just my way of "debugging". I think its not the best way to debugg, but i am very new in the world of prorgamming and this is kind of easy.
However, the first two alerts are shown, if i activate a link. So the (first) mistake is on the line
id.classList.remove('shown');
Normally, the right-box is hidden, so that only one content is load.
Do you understand my problem till here?
I would appreciate fast help!
Greetings, Yannic! :)
Look at this : http://snipplr.com/view/3561/ to know remove class pure javascript
getElementsByClassName gets multiple elements, try:
var id = document.getElementsByClassName('shown')[0];
Or iterate through them if you want to remove class from all elements with class shown;
i am trying to create a rating system. The idea is on page load I would see how many stars each star has. And when I click on the a star it increases the width of the bar. Here is what I am doing. The problems so far are 1: the bars are not displaying correctly 2: the numbers of stars are not incremental correctly. The idea is to update the bar after a new click. Here is the fiddle. I have few other questions associated with this. I will do a new post once I solve this one
http://jsfiddle.net/sghoush1/VU3LP/37/
the Jquery looks like this
$(function(){
var baractive = $('<div class="barActive"></div');
baractive.appendTo('.bar');
var curr_val = $('.reading').html();
var new_val = parseInt(curr_val)+1;
if(curr_val< 20){
$('.barActive').css('height', '20px').css('width', '20px');
}
if(curr_val< 40){
$('.barActive').css('height', '20px').css('width', '40px');
}
$('.star').click(function(){
$('.reading').eq($(this).index('.star')).html(new_val);
$(this).addClass('active');
$('.bar').eq($(this).index('.star')).addClass('barActive');
});
});
As far as problem #2 goes: you need to read curr_val and compute new_val inside the click response function. As it is, you read the first one and use that for all star bars.
As far as problem #1 goes: I have no answer; you say that the bars don't display correctly, but you don't say what behavior you want. However, I suspect that this problem will also go away if you move the css assignments into the click function as well (using new_val instead of curr_val for the bar). You would still need to initialize each bar using its specific value and index.
I am trying to implement a webpage which should have expected to have the following properties.
The HTML page contains many lines of text (thousands of lines), basically a log file.
Upon a desired action, line which is related to the action should be highlighted and shown . (exactly the way that would happen if you click on corresponding source button of a logged variable in chrome inspect element.)
This seems to be very basic but I couldn't figure out how! May be I am missing some literary terms.
Thank you.
You need to do a few things:
$("li").each(function(i, element) {
var li = $(element);
if (li.text() == "Orange") {
li.addClass("selected");
// Get position of selected element relative to top of document
var position = li.offset().top;
// Get the height of the window
var windowHeight = $(window).height();
// Scroll to and center the selected element in the viewport
$("body").scrollTop(position - (windowHeight/2));
}
});
See DEMO.
There are many ways to go about this. But is there any class tags in the logged source or is just one large text block?
If there are class or id tags on the html you can use javascript or jquery to do this.
document.getElementById('myText');
or in jquery
var element = $("#myText");
//example css changes
element.css("position","center");
element.css("color","red");
Then change the css style on those html elements.
Whilst this does use some of the code from a question I asked yesterday (Dynamically check / uncheck checkboxes in a tree), I feel that this is a slightly different question as I need to add in clearing divs and also slide data in the tree up and down.
I've taken what I learnt yesterday and added in a slider as per this link - http://jsfiddle.net/3V4hg/ - but now I've added clearing divs the tree is not unchecking all the way to the top if the bottom of the tree has no options selected. If you look at the JSFiddle, if you check A and/or B then uncheck it, the parent and grandparent do not uncheck automatically. Also, for some reason that I haven't figured out yet - the slider decides to slide upon clicking the checkbox in the child area (I've also noticed that the toggle image for the region area to display changes when the continent one toggles - haven't tried to solve that as just noticed when adding to JSFiddle).
I'm also thinking that there may be a better way to code the togglers/sliders (since used by more than one kind of toggle, but I'm unsure).
Fiddle: http://jsfiddle.net/3V4hg/2/
I have applied some modifications to your code. Have a look at the fiddle and comments (at the code, and at the bottom of the answer):
$('#delivery_zones :checkbox').change(function(){
$(this).siblings('ul').find(':checkbox').prop('checked', this.checked);
if(this.checked){
$(this).parentsUntil('#delivery_zones', 'ul').siblings(':checkbox').prop('checked', true);
} else {
$(this).parentsUntil('#delivery_zones', 'ul').each(function() {
var $this = $(this);
var childSelected = $this.find(':checkbox:checked').length;
if(!childSelected){
// Using `prevAll` and `:first` to get the closest previous checkbox
$this.prevAll(':checkbox:first').prop('checked', false);
}
});
}
});
// collapse countries and counties onload
$(".country_wrap").hide();
$(".county_wrap").hide();
// Merged two click handlers
$("#delivery_zones").click(function(event){
var root = event.target; // Get the target of the element
if($.nodeName(root, 'input')) return; // Ignore input
else if(!$.nodeName(root, 'li')) {
root = $(root).parents('li').eq(0); // Get closest <li>
}
// Define references to <img>
var img = $('.toggle img', root).eq(0);
// Define reference to one of the wrap elements *
var c_wrap = $('.country_wrap, .county_wrap', root).eq(0);
if(img.attr('src') == "http://uk.primadonna.eu/images/arrow_white_up.gif"){
img.attr('src', 'http://www.prbuzzer.com/images/downarrow-white.png');
c_wrap.slideUp("slow");
} else {
img.attr('src', 'http://uk.primadonna.eu/images/arrow_white_up.gif');
c_wrap.slideDown("slow");
}
});
* I have defined the root to be a <li> element. The first occurrence of the .count(r)y_wrap element should be selected, which is achieved using .eq(0).
Your previous code contained some logical errors, which I have also fixed: $('.toggle img', this) selects every <img> element which is a child of .toggle, which caused the arrows at the end of the tree to toggle too. My solution using event.target is more neater, and allows your example to be extended to even deeper trees.