The layout of my page:
<div id="header">This is where you select tabs</div>
<div id="main">
<div id="left">Main Content</div>
<div id="right">Sidebar</div>
</div>
<div id="bottom">
<form>
<input id="msgForm" type="text" name="chat" size="100"/>
<input id="enterB" type="submit" value="enter"/>
</form>
</div>
The left and right needs to change content when you select another tab on the header. I am thinking of putting the innerHTML of each tab into an array, and when I want to switch tabs I just arrayOfContent[currentTabId] = getElementById("left").innerHTML; getElementById("left").innerHTML = arrayOfContent[switchTabId]
And the same for right. This page will use ajax requests to add divs and remove old divs (which for the current tab I can just remove divs with javascript by id, but for tabs not currently active I'll have to split strings as I'll mark a <!-- SPLIT ME --> at the end of every js-created div.)
Will this work? Are there better approaches to this?
according to me,
better approach is to use jquery library and Ui library
http://jqueryui.com/demos/tabs/
see the example of ajax page.
Related
I intend to create multiple expand/collapse button at the bottom of each article that I display in a stream using AngularJS.
This is what my page structure looks like:
<h1>Heading of the Page</h1>
<div class="item-content-wrapper">
<div class="item-content-block">
<article id="item-content" class="item-content">Some very long text goes here.
</article>
</div>
<div class="action-bar-wrapper">
<div class="action-bar">
<div class="action-button">
<icon name="expand">E</icon>
</div>
<div class="action-button">
<icon name="share">S</icon>
</div>
</div>
</div>
I have multiple item-content-blocks and I want to expand and collapse each block using AngularJS (Please DO NOT use jQuery anywhere).
Since there will be multiple blocks, with same Class names and everything, a scalable code will be needed.
I am just beginning with AngularJS, so any help will be appreciated. Thanks!
Since there will be multiple blocks, with same Class names and everything, a scalable code will be needed.
you essentially should have each block driven off an item in your view model. Just an an expanded (boolean) option to each item. Then you can drive css classes off of it using ngClass.
More
https://docs.angularjs.org/api/ng/directive/ngClass
on the following site: http://www.strategix.co.za/ on that page you will see the heading OUR SOLUTIONS with the 8 hover over boxes.
what I'm trying to do is to wrap a href around each box so that not only when you hover over does it display the right side div but you can click on the box which takes you to the relevant page.
so in the code:
<div class="left2">
<div class="box2">Microsoft Dynamics ERP</div>
</div>
I try say:
<div class="left2">
<div class="box2">Microsoft Dynamics ERP</div>
</div>
But the minute I save it in wordpress it removes the ahref. I also tried this:
<div class="left2">
<div class="box2"><div>Microsoft Dynamics ERP</div></div>
</div>
But that didnt save either. I just need each seperate whole box to have an href.
Will appreciate some help.
Thanks.
Try
<div class="left2">
<div class="box2" onclick="javascript:window.location.href='link';">Microsoft Dynamics ERP</div>
</div>
Using javascript is one way to apply a link to an entire div.
I need to be able to drag all the .notes on the page, but when i use draggable() from the jQuery UI, it only works for the first .note. I have jQuery UI downloaded and is working. When I click the page it makes a new .note so I think that this is a cloning problem. Here is the code
HTML:
<body>
<div id="wrapper">
<div id="wrp">
<h1>Click to make a new note!!!</h1>
<hr>
<div class="note">
<p class="remove"><b>X</b>
</p>
<div class="time"></div>
<hr>
<textarea class="item"></textarea>
<div class="saved"><span class="msg"></span>
</div>
</div>
</body>
JS:
$(".note").closest('.note').draggable();
(I will not include all my JS)
Fiddle here: http://jsfiddle.net/cjhind/zfxj3cps/46/
Any advise?
Add this extra line in your onclick function because jquery cannot recognise new items. It is like it has already did target the items with .note and you need to retarget them. Take care because this will load again the script and it will act twice. so as many items you insert you can see by firebug that it is calling script more times. If you need more info let me know.
$('#wrp, #wrapper').click(function showNote() {
$('.note').fadeIn();
$(".note").closest('.note').draggable(); // ADD THIS TO GIVE YOUR NOTE THE ABILTY TO BE DRAGABLE
});
Did this help?
I have a main DIV where I would like to insert different DIVs via PHP.
Very simplified my HTML looks like:
<div id="mainDiv">
<div id="invoice1">
....
</div>
<div id="invoice2">
....
</div>
<div id="invoice3">
....
</div>
</div>
The user can then interact by clicking on buttons (ajax) and fx. the div with "invoice2" needs to be given new HTML (cleared out and having inserted the new HTML).
I can do this by using innerHTML but gets very slow with 100's of divs (invoices) and the coding is not nicely done.
To improve this I tried with insertAdjacentHTML but I cannot get it to make HTML like:
<div id="invoice1">
insertAdjacentHTML inserts it as
<div id="invoice1"></div>
And the ending
</div>
is stripped away (making the page look wrong).
So how can I do this in a smart way?
I am trying to create a group of links or buttons that will change the content of a div
<p><button>EMPLOYEE NAME HERE</button></p>
<p><button>EMPLOYEE NAME HERE</button></p>
<p><button>EMPLOYEE NAME HERE</button></p>
<p><button>EMPLOYEE NAME HERE</button></p>
Each employee has a different image and description but each div are the same size, the first employee will be shown by default as so to have no empty space but when the other 3 are selected the div is filled with the respective div according to it, then you can cycle through the profiles as you wish. Here is my div structure
<div id="employee">
</div>
<div id="employee1">
</div>
<div id="employee2">
</div>
<div id="employee3">
</div>
<div id="employee4">
</div>
Here is the javascript im trying to use
<script type="text/javascript" charset="utf-8">
$('button').bind('click', function() {
$('div#employee').html($('div#employee' + ($(this).index()+1)).html());
});
</script>
All the help i can get would be really appreciated, im not that great at java script and really need a hand with this. Im not sure i explained myself very well but i did try.
Just to confirm, all the divs are hidden until the button is pressed, then the div for that employee will appear, except the first profile which will appear by default on load.
Thanks for your help in advance.
James
Here's a pretty simplified example. It may or may not be the most efficient, but it should do what you want. This is assuming that you're pre-loading all of the content into the divs, but just hiding it at the beginning. If you are wanting to dynamically load the content, then you'll want to use some ajax
HTML
<p><button id="button1">EMPLOYEE One</button></p>
<p><button id="button2">EMPLOYEE Two</button></p>
<p><button id="button3">EMPLOYEE Three</button></p>
<p><button id="button4">EMPLOYEE Four</button></p>
<p><button id="button5">EMPLOYEE Five</button></p>
<br/><br/>
<div id="employee1" class="employeeInfo">
Employee1 is a good employee
</div>
<div id="employee2" class="employeeInfo">
Emloyee2 is an alright employee
</div>
<div id="employee3" class="employeeInfo">
Emloyee3 is the best employee ever!
</div>
<div id="employee4" class="employeeInfo">
Employee4 is not a very good employee
</div>
<div id="employee5" class="employeeInfo">
Employee5 is about to be fired
</div>
Javascript
$(function(){
$("#employee1").show();
$("button").on("click", function(){
$(".employeeInfo").hide();
$("#employee"+String($(this).attr("id").substring(6))).show();
// OR if you don't want to have to give IDs to the buttons
// $("#employee"+String($("button").index($(this))+1)).show();
});
});
CSS
.employeeInfo {
display: none;
}
JSFiddle