Hii all,
am new to javascript and i don't know much about tabber class ,i would like to have a page where tabs are in two differnet line attached system property page where tabs are in two different line .
<div class="tabber">
<div class="tabbertab">
<h2>tab1</h2>
form stuff goes here...
</div>
<div class="tabbertab">
<h2>tab2</h2>
form stuff goes here
</div>
<div class="tabbertab ${tab_default}">
<h2>tab3</h2>
form stuff goes here
submit button here...
</div>
suppose these are two tabs which i would like to come into two different line...
You'll need to use code that support such feature, from quick look jQuery has several plugins:
http://plugins.jquery.com/plugin-tags/tabcontrol
For example this one have the "vertical" tabs you're after.
You just need to insert this as separator:
<li style="display: block;"></li>
And create an empty div for corresponding tab "content".
Related
I just want to print 2 elements but when I do it does not look well. My alternative solution was two buttons per element but it is not good.
I used this library https://github.com/jasonday
Here is the preview
When im going to print/download here is the preview
Are there any ways to separate them?
Here is my print code. I got 2 elements.
$("#pdf, #pdf2").printThis();
Just add css style "break-after: page;" between the two section/table
<div> Section </div>
<div style="break-after:page;" ></div>
<div> Section </div>
i'm working on a HTML5/bootstrap app that need for several reason to be a single page app.
i'm looking on a way to 'simulate' multipage on a single page
for example to hide "customer" "partner" "subscriver" section when profile section is shown
i'dont want that users can scroll down from one section to another
i really need to have a single page, so librairy like pagify doen't work and iframe doesn't work as well
any idea ?
thanks
Why not something like: http://getbootstrap.com/javascript/#collapse If you use Bootstrap you can hide and show div's on the fly.
Greets,
Michel
If I understand your problem correctly, you want to keep everything on one page, but only show one section at a time. You can do this with javascript by hiding all the divs using CSS, then setting each nav button click to show the corresponding div:
<input type="submit" id="custbtn" value="Customers" />
<input type="submit" id="partbtn" value="Partners" />
<input type="submit" id="subbtn" value="Subscribers" />
<div id="customer">
Customer stuff
</div>
<div id="partner">
Partner stuff
</div>
<div id="subscriber">
Subscriber stuff
</div>
$("#custbtn").click(function(){
$("#customer").show(1000);
$("#partner").hide(1000);
$("#subscriber").hide(1000);
});
$("#partbtn").click(function(){
$("#customer").hide(1000);
$("#partner").show(1000);
$("#subscriber").hide(1000);
});
$("#subbtn").click(function(){
$("#customer").hide(1000);
$("#partner").hide(1000);
$("#subscriber").show(1000);
});
Fiddle
I have this code for the header
<div id="header">
<IMG SRC="http://danithemes.fanscity.eu/shugar/wp-content/uploads/2014/11/header-principal.png">
</div>
And this code for the main menu
<div id="menu">
Link One,
Link Two,
Link Three
</div>
I want the header image to fade into another image through the main menu links. Is this possible? Thanks.
First of all most W3C folks will get mad at you for this line <div id="header">
Anything syntactically named with an id the same as a generic HTML object tag needs to just be that tag. Anything good enough to give an id of id='header' should probably just be a <header> tag.
Secondly, I am unsure what the question is asking fully so let's go with something not yet said. #Parody showed a fiddled way of having the images change on click. The part of your question that said I want the header image to fade into another image through the main menu links. Is this possible? is difficult to understand so I am going to assume that you want some kind of event to trigger the changing of the images? There are many ways to do this but the best of which (especially for beginning programmers) is to use Bootstrap version 3.0+ since it comes with HTML driven stuff that usually requires JavaScript/JQuery to accomplish.
If you don't want to use Bootstrap then that's fine here is an example of how to use a hover event to trigger the change using JQuery...
HTML
<div id="header">
<img src="http://danithemes.fanscity.eu/shugar/wp-content/uploads/2014/11/header-principal.png" />
</div>
<div id="menu">
Link One
Link Two
Link Three
</div>
JAVASCRIPT/JQUERY
$(".navLink").each(function() {
$(this).hover(function() {
$("#header img").css({"background-image":"url($(this).attr('data-image'))"});
});
});
Am creating a web application having 4 tabs... Each tab contains a sidemenu (jQuery) and the remaining part is divided into 2, topdiv and bottom div (table with 2 colums.. col1=sidemenu, col2=topdiv+bottomdiv) ... I use
$("#topdiv").load("contents/abc.html #xyz")
To load contents of div xyz to topdiv, which(xyz) is in another page abc.html when I click a particular link in the sidemenu... But sometimes when #xyz will again have 4 or 5 tabs ,those tabs are not available as tabs in #topdiv... instead they appear as just list.. am using $("#___").tabs() for creating tabs...can anyone help me? I cannot add images here since am not having enough reputations in stack overflow. if some one provides ur email address I can attach images of my current status of page and those of which I need to design... here is part of ma code.
============================================================================
home.jsp
======================================================================
<div id="mainmenu" class="tabs">
<ul>
<li >tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
<div id="tab1">
</div>
<div id="tab2">
<div id="topdiv">
</div>
<div id="bottomdiv">
</div>
</div>
<div id="tab3">
</div>
</div>
===========================================================================
abc.html
============================================================================
<div id="xyz">
<div id="innertabs" class="tabs">
<ul>
<li >inner tab1</li>
<li>inner tab2</li>
<li>inner tab3</li>
</ul>
<div id="innertab1">inner tab 1 contents</div>
<div id="innertab2">inner tab 2 contents</div>
<div id="innertab3">inner tab 3 contents</div>
</div>
</div>
===========================================================================================
main.js//javascript---jquery-ajax connected
===========================================================================================
$(".tabs").tabs();
$("#topdiv").load("contents/abc.html #xyz");
enter code here
========================================================================================
pls note that div '#mainmenu' is appearing in tab format... but "#innertabs" also having class "tabs" is not appearing in tab format.. instead they appear in #topdiv as lists and contents below it
===========================================================================================
I assume you using jquery ui tabs.
If so after loading other page content, apply again tabs function on main div
$( "#tabs" ).tabs();
Actually you should apply .tabs() after ajax content is loaded. Not before that. I am not sure if applying .tabs() twice may damage it.
Update:
Here is fiddle for you Example . then your code will be
$("#mainmenu").tabs();
$("#topdiv").load("contents/abc.html #xyz");
$("#innertabs").tabs();
atlast after a lot of researchs and experiments, i hav found a solution to this... actually i hav to use unique div ids for tabs instead of class = "tabs"... then the tab statement will change to $("#innertabs").tabs(); but to make sure that $().tabs() is invoked only after loading the contents, put that statement in a callback function of $().load()... so my actual problem was $("#innertabs").tabs() is invoked even before it is loaded into #topdiv from the page abc.html..hence they can be displayed only as lists as there is no div with id=innertabs at the time of $().tabs() is invoked. . now it is avoided and the working code is
$("topdiv").load("contents/abc.html #xyz",function(){$("#innertabs").tabs();});
so only after loading the div into topdiv, corresponding tabs are generated and thus it will be displayed as tabs itself
so i think its good to use a callback function all the time when u need this stuff to be done without any errors...
also if anyone came to know about the disadvantages of this method pls do post here.. it wll be helpfull for me as a fresher
looking forward to a career in software development...
I have a specific goal in mind.
Please reference this page: http://cubancomplex.kodingen.com/test/MM/dashboard1.html
On the very bottom right, there is a <div> with two buttons on each side. The <div> currently has one google chart contained inside.
The goal is for a user to be able to use those two buttons to switch between charts for approximately eight cities.
I am not familiar with javascript or jQuery so I would appreciate any assistance! How should I go about achieving this?
Here is the code for that section:
<div id="footer">
<div class="markerNavLeft" title="Prev" id="prevMarker">‹</div>
<div id="markers">
<div id="chart">
<div id="auckland_chart_div"></div>
</div>
</div>
<div class="markerNavRight" title="Next" id="nextMarker">›</div>
</div>
Based on my experience, there's 2 option that you can use..
you can place your charts in your div id="chart". The first one add a class to mark it as a selected one (e.g. selected), of course the other is hidden… Please add a same class for all of the chart(e.g. chart-detail). Then, you can use
var temp = $(".selected").next(".chart-detail"); $(".selected").removeClass("selected"); temp.addClass("selected");
for the previous button, you can use .previous function.
You can use ajax ( .ajax function or .load function). Mark each chart with an ID so, you know what's the next or previous chart (within php).