|
JavaScript - Making Horizontal Tab Line Vertical?
I have a horizontal tabsystem given with this code:
Code:
<style>
.tabContainer{ float:left;
width:795px;
margin: 1% 1%;
background-color:#0597ca;
}
.tabContainer .digiTabs { width:10%; float:left; }
.tabContainer .digiTabs li{float:left;background-color:#0597ca;border:1px solid #e1e1e1;width:100%;padding:5px!important;cursor:pointer;border-bottom:none;margin-right:10px;font-family:verdana;font-size:.8em;font-weight:bold;color:#fff;}
.tabContainer .digiTabs .selected{background-color:#5cc1dd;color:#FFF;}#tabContent{padding:10px;background-color:#5cc1dd;overflow:hidden;float:left;margin-bottom:10px;border:1px solid #e1e1e1;width:100%;}
p{
padding:10px 10px 10px 10px;
margin: 0px 0px 10px 0px;
}
</style>
<script type="text/javascript">
function tabs(y)
{
var lis=document.getElementById("sidebarTabs").childNodes; //gets all the LI from the UL
for(i=0;i<lis.length;i++)
{
lis[i].className=""; //removes the classname from all the LI
}
y.className="selected"; //the clicked tab gets the classname selected
var res=document.getElementById("tabContent"); //the resource for the main tabContent
var tab=y.id;
switch(tab) //this switch case replaces the tabContent
{
case "tab1":
res.innerHTML=document.getElementById("tab1Content").innerHTML;
break;
case "tab2":
res.innerHTML=document.getElementById("tab2Content").innerHTML;
break;
case "tab3":
res.innerHTML=document.getElementById("tab3Content").innerHTML;
break;
case "tab4":
res.innerHTML=document.getElementById("tab4Content").innerHTML;
break;
default:
res.innerHTML=document.getElementById("tab1Content").innerHTML;
break;
}
}
</script>
<div class="tabContainer" >
<ul class="digiTabs" id="sidebarTabs">
<li id="tab1" class="selected" onclick="tabs(this);">Shairzys</li>
<li id="tab2" onclick="tabs(this);">Friends' Shairz
</li>
<li id="tab3" onclick="tabs(this);">Blog</li>
<li id="tab4" onclick="tabs(this);">Info</li>
</ul>
<p><center>
Is there a way to make these tabs go verically instead? Like turn the text and all? Similar TutorialsHi, As an example, I have a horizontal navigation bar that grows and shrinks when the page is resized. I'd like it if the horizontal scroll bar only appeared when the window is less than x pixels wide (thus, cutting off some of my navigation options). The same thing with zooming. If the user starts to zoom the page and the options of my nav bar begin to get cut off, is there any way to show the scroll bar after x number of zooms? I'm just trying to avoid ALWAYS showing the horizontal or vertical scrolls. I'd like them to only appear as needed, like this site: http://www.crimemapping.com/map.aspx...9-966e8cda4d70 (Notice if you zoom in, or change the window size, the behavior is like what I mentioned). Is there any way to do this? I need the image to move horizontal instead of vertical. Here is the code. Code: //##########################################################################//
// Scrolling background Tutorial Code by http://www.kudoswebsolutions.com
// Original Source code: http://youlove.us/
// Modified and extended by Kudos Web Solutions
// copyright 2009 kudoswebsolutions.com
//##########################################################################//
$(function() {
// Define the height of your two background images.
//The image to scroll
var backgroundheight = 2000;
//The image to overlay
var backgroundheight_two = 1000;
// Create a random offset for both images' starting positions
offset = Math.round(Math.floor(Math.random()* 2001));
function scrollbackground() {
//Ensure all bases are covered when defining the offset.
offset = (offset < 1) ? offset + (backgroundheight - 1) : offset - 1;
// Put the background onto the required div and animate vertically
$('#container3').css("background-position", "50% " + offset + "px");
// Enable the function to loop when it reaches the end of the image
setTimeout(function() {
scrollbackground();
}, 100
);
}
function scrollbackground2() {
//Ensure all bases are covered when defining the offset.
offset = (offset < 1) ? offset + (backgroundheight - 1) : offset - 1;
// Put the background onto the required div and animate vertically
$('#container2').css("background-position", "50% " + offset + "px");
// Enable the function to loop when it reaches the end of the image
setTimeout(function() {
scrollbackground2();
}, 100
);
}
// Initiate the scroll
scrollbackground();
scrollbackground2();
// Use the offset defined earlier and apply it to the div.
$('#overlay').css("background-position", "50% " + offset2 + "px");
$('#overlay2').css("background-position", "50% " + offset2 + "px");
});
Hi, Quick question - I want to find the scrollTop value for some ajax divs but I can't seem to get scrollTop to work. The html looks like this: Code: <div id="media-meta-container" style="width: 302px;">
<p>Subtitles <span id="status" ></span></p>
<div id="scrollbox" >
<div id="content" >
<div id="content_0">Content 0</div>
<div id="content_1">Content 1</div>
<div id="content_2">Content 2</div>
<div id="content_3">Content 3</div>
<div id="content_4">Content 4</div>
</div>
</div>
</div>
Where scrollbox is, you guessed it, a scroll box. I want to find the y position of each of the content divs. I tried this (for exampel for the last element) but it didn't work: Code: var height = $('#content div')[4].attr('scrollTop');
Any ideas? How do you make a vertical carousel that displays either text or images?
Hi, on my site:http://www.jbiddulph.com/chrisbradshaw/ I need to be able to scroll the whole site horizontally, there may be 20 or so images, ther only way i have figured out how to do it is it guess a max width, like just put width: 5000px; but I cannot determine the whole width with however many images in the page?! I have a javascript below that gets the width of the first image but I need to get width of all images and add 20px padding to the right of each http://www.jbiddulph.com/chrisbradshaw/getwidth.html Can someone please help?! I have looked a Jquery sliders and scrollers and can only find carousels?! I'm trying to make a div slider go left to right. In as much detail this is what I would like: -The div to be hidden on first page load -Have the div slide left to right AND BACK by the click of an image NOT a button -When the image (of a right arrow) is clicked, let the arrow slide out with the div (and IF possible when div is fully extended have image of a left arrow enabling a slide back and vice-versa) Here's what I got so far. (Don't need to use) Code: <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="TestSite/js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#slideleft button').click(function() {
var $lefty = $(this).next();
$lefty.animate({
left: parseInt($lefty.css('left'),10) == 0 ?
-$lefty.outerWidth() :
0
});
});
});
</script>
<style>
.slide {
position: relative;
overflow: hidden;
height: 120px;
width: 350px;
margin: 1em 0;
background-color: #FFF;
border: 1px solid #999;
}
.slide .inner {
position: absolute;
left: 0;
bottom: 0;
width: 338px;
height: 36px;
padding: 6px;
background-color: #F00;
color: #333;
}
.slide button {
margin: .7em 0 0 .7em;
}
.js #slidebottom .inner {
display: none;
}
</style>
</head>
<div id="slideleft" class="slide">
<button><img src="TestSite/js/fancy_nav_right.png" /></button>
<div class="inner">Slide from bottom</div>
</div>
<body>
</body>
</html>
Hello there ppl, I am trying to use the menu HERE is the css horizontal stop menu. I am trying to get this thing centered on the page and am having no success. Can any one tell me what i need to edit or insert so it will be centered in the page. The entire menu not just the text on within the menu. Let me know if i need to post the code, the only reason why i didn't is because there are a few different elements and i'm not sure which one i need to edit. Thanks Hi All, I am trying to introduce a vertical scroller to my site, I got the code from a tutorial and slightly tweaked the html to meet my needs but now the content doesn't scroll. Would someone be willing to take a quick look and see if they can spot anything? None of this code has been altered! Code: <script type="text/javascript">
$(document).ready(function(){
$(".newsticker-jcarousellite").jCarouselLite({
vertical: true,
hoverPause:true,
visible:10,
auto:500,
speed:1000
});
});
</script>
This is the HTML and PHP part: Code: <div id="newsticker-demo">
<div class="newsticker-jcarousellite">
<br/>
<?php
$query = mysql_query("SELECT * FROM employers WHERE featured = 'Yes' AND image != '' ORDER BY rand()");
$i=0;
//$query = mysql_query("SELECT * FROM employers WHERE f_emp_active = 'Yes' and image !='' ORDER BY rand()");
echo '<div>';
while ($aqm=mysql_fetch_array($query)){
?>
<div>
<div>
<div class="thumbnail">
<div align="center"><a href="company.php?companyname=<?php echo $string ?>">
<img src="<?=$fullurl?>/thumbnail.php?gd=2&src=employers/logo/big/<?=$aqm[image]?>&maxw=<?=$a18[width]?>" alt="<?=$aqm[companyname]?>" title="<?=$aqm[companyname]?>" class="noborder" /></a>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<br/>
<br/>
<?php
if($i==5){
echo '</div><div>';
}
$i++;
}
echo '</div>';
?>
</div>
</div>
Hello, I am currently working on a menu and have a few questions and have one issue. First: How can I set the menu to automatically expand on mouse rollover instead of click? Here is the code as it stands right now: Quote: $(document).ready(function () { $('img.menu_class').click(function () { $('ul.the_menu').slideToggle('medium'); }); }); Second Question: For some reason, the menu is appearing behind a table row when it expands, thus hiding a good portion of the menu. Here it is: http://gem-tech.com.mytempweb.com/store/pc/home.asp Try clicking on 'Products & Services', and then clicking on "Centerfire Rifle Suppressors" from the dropdown menu. When it takes you to that category page, click the menu again and you will see that the menu hides behind the <h1> table row. How can I fix this? Thank you very much Hi, I would like to use the menu that is linked below. I implemented it on my website but I discovered that it can only go 2 levels deep. I would like it to go one more level and I think that would be done in the javascript but I can't tell for sure. Could someone steer me in the right direction? http://www.javascriptkit.com/script/...icalmenu.shtml Thanks! Rob Hi I need to make a vertical menu bar where the sub menu that flies out on the right always starts at the top rather than next to its parent. I used this script http://www.javascriptkit.com/script/...icalmenu.shtml at the moment lists look like this (bold is selected option) 1 2 1 3 2 4 3 1 what i want is this to happen 1 1 1 2 2 3 3 4 Alternatively, does anyone know how to get the vertical spry menubar from DW to work in Safari? To get an idea of what I want, see this working version (not working in Safari though) in Firefox http://www.photoshopcourselondon.com...0open%202.html thanks mikael Does anyone know a way to do vertical sync with javascript animations (getting timers to run on the vertical sync)? I rather doubt there is a way to do it, but I find it annoying that when I am dragging an object with my mouse that the object "tears" sometimes. Right so I have a popup window that when opened in any browser expect of course IE will open perfectly in the centre of the screen. However with IE it decides to jump to the top of the page, then is pushed back down to just show the popup at the bottom of the window. Anyone got any idea how I can stop this? Using IE8. Code: function openPopup_JD(params){
var name = params.name;
var blanket = params.blanket || true;
var effect = params.effect || "fade"
var afterOpen = params.afterOpen || "";
var width = document.getElementById(name).style.width;
var height = document.getElementById(name).style.height;
width = width.slice(0, -2);
height = height.slice(0, -2);
width = width * 1;
height = height * 1;
document.getElementById(name).style.left = getLeft_JD(width) + "px";
document.getElementById(name).style.top = getTop_JD(height) + "px";
//Create blanket if it doesn't already exist.
if(!document.getElementById('blanket')){
var popupBlanket = document.createElement("div");
popupBlanket.id = 'blanket';
popupBlanket.style.display = "none";
popupBlanket.style.opacity = 0;
popupBlanket.style.filter = 'alpha(opacity = 0)';
popupBlanket.style.backgroundColor = "#000";
popupBlanket.style.position = "absolute";
popupBlanket.style.zIndex = 9998;
popupBlanket.style.top = "0px";
popupBlanket.style.left = "0px";
popupBlanket.style.width = "100%";
popupBlanket.style.height = getBlanketHeight()+"px";
document.body.appendChild(popupBlanket);
}
switch(effect){
//-----------------------------------
//FADE IN
//-----------------------------------
case "fade":
if(blanket == true){
animate_JD({
objects: 'blanket |'+name,
properties: "opacity |opacity",
start: "0",
end: "0.75 |1",
inerval: "20 |20",
frames: "15 |20",
effect: "SFS",
wait: "0 |-1",
onStart: "toggle('blanket') |toggle('"+name+"')",
onComplete: " |"+afterOpen
});
}else{
animate_JD({
objects: ''+name,
properties: "opacity",
start: "0",
end: "1",
interval: "20",
frames: "6",
effect: "SFS",
wait: "0",
onStart: "toggle('"+name+"')",
onComplete: ""+afterOpen
});
}
break;
Not all of the function is shown because below this are only other effects Hi All, I would like to ask is if there is any way I could control the selectbox's vertical scroll bar. scenario: user inputs value from a textbox and it appends it to the selectbox. after the user inputs more than 5 entries, the selectbox will create the vertical scroll bar but will not focus/show the latest entry. problem: i can't seem to automatically focus or show the latest entry. what i did: i am using jquery to add data to the selectbox and i use jquery to set the selected value. Code: $('#selectbox').val('latest value').attr('selected','selected');
this code selects the latest value on the selectbox but it doesn't scroll down to show it. the user still has to drag the scroll bar down. any idea i can auto scroll it to the latest value? thanks for the help Hello, I have a portfolio online (boctay.com/asaf) and I'm using the quicksand plugin with some sorting/filtering script. My question is simple, for some reason when clicking on one of the buttons to filter, the items are first ordered into a vertical row then redrawn horizontally. Never seen this before and have no clue what is causing it. Thanks for any help. Much appreciated. I can't seem to find what I need but I know it exists. I trying to find a vertical scroller that will automatically have the text scroll upwards but have an arrow above and arrow below to be able to control the direction of the scrolling text, or a script with no arrows but still allow me to take control by mousing over the text to scroll up or down. Thanks Hello, I was wondering if anyone knew how to alter SmoothGallery to move the thumbnail carousel from a horizontal one along the top to a vertical one along the right side. It's supposedly possible within the core code, and I've seen it done, but it's not in the documentation and no one on the SmoothGallery forums seems to know how to do it. Ultimately, I'd like to move the carousel to the right side, make it static so that it's always overlaying the main image (rather than clicking to unhide it), and make sure the slideInfoZone is adjusted so as to not overlap with the carousel. I'm assuming that anyone who knows how to do it has SmoothGallery and has made the carousel vertical before... but if not, and someone wants to take a crack at it anyway, the SmoothGallery files are HERE. Thanks for your help in advance! http://jakoba.dk/index.php/joomla-websites Two things I would like some help with: First, the cinema slider on the right does have a litle problem on the top of the slider. First it pops op above the slider div and after the slide finishes it goes away. I want it to slide without the jumping up and down in the top. Second, I would like to make the slider stop on mouseover, so the reader have a chance to click on a picture withou the module keep sliding. Hope someone could help me with this, cause im not that good to javascript. Cheers Jakob hi, i am trying to scroll my list of twitter feeds vertically, I am using the following script: http://www.******************/javasc...ry-news-slider I have stripped everything out and have the demo working perfectly I have now uploaded JS files and put in the relevant code and it's not working?! here is my website: http://judd-dev.co.uk/pitch/ (homepage twitter feed bottom right) here is the code I have in my website: Code: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jcarousellite_1.0.1c4.js"></script>
<script type="text/javascript">
$(function() {
$(".tweet_list").jCarouselLite({
vertical: true,
hoverPause:true,
btnPrev: ".previous",
btnNext: ".next",
visible: 3,
auto:3000,
speed:500
});
});
</script>
<div id="social-feed-wrapper">
<div class="feed" id="twitter-feed" style="display: block;"><ul class="tweet_list"><li class="tweet_first tweet_odd">text goes here</li><li class="tweet_even">more text</li></ul></div>
<ul class="social-icons">
<li class="twitter"><a href="#twitter-feed" class="active"></a></li>
<li class="facebook"><a href="#facebook-feed"></a></li>
</ul>
</div>
Please help Hi All, Does anyone know of any good horizontal accordion scripts that use jquery, like this one: http://www.slidedeck.com/ I would like something very similar to that but unfortunately the free version is as customizable as I need it to be. I've done a Google search but found nothing as of yet... Thanks, Greens85 |
|||||||