I have a left pane with 5 items as hyperlink. When i click on the hyperlink, i wanna display corresponding item description in the right hand side.
I am developing the website using html.
By default there will be some description. when i click on item1, i wanna display the details of item1 and click on item2 i wanna display item2's details.
How can do this? Can i display the page in the iframe or something? what is the best practice?
If you want to use an IFrame, then you can do so, and just set the target of the hyperlink to be the name of the iFrame.
However, iFrames are considered bad practice. What would be better, is to use JQuery and use the load command.
For example, if your right hand pane has an id of right-pane:
item 1
function showItem(url) {
$('#right-pane').load(url);
}
You use the target attribute. :)
http://www.w3schools.com/HTML/html_frames.asp
Related
I have text that I need to link to where you click on it and an iframe window pops up with the content from an external site. I have found code that when I use it, a box appears above the text and the content shows in the box when clicked. But I need it to not show anything until the link is clicked.
<iframe name="book" src="https://www.timetrade.com/book/9PK2K"></iframe>
Book Now!
This is the code I used to try to get it to link to a pop up iframe window but it showed a box above the text.
You'll need to use some javascript for this.
A simple onClick() method that sets the display to 'Block' and 'None' to display and hide, respectively, should do the trick.
The javascript would set style.display="none" by default, and the onClick will be written to set style.display="block" or some un-hidden attribute.
Check out this http://www.w3schools.com/jsref/event_onclick.asp for onClick
and http://www.w3schools.com/jsref/prop_style_display.asp for using javascript to show/hide DOM objects.
Good luck!
commerce site that has a particular tab navigation code that allows users to click and view information.
The Tab Nav looks like this:
Details | Shipping | Returns | Lifestyle View
When you click on anyone of these a paragraph appears below the tab with more information. What happens though is that all the other list items get pushed below the paragraph rather than staying in their current positions. So for instance if I click on "Details," the "Shipping," and "Returns," tab gets pushed down. I would like all the menu items to stay intact and just have the paragraph appear below each menu.
Any help would be greatly appreciated.
the page can be found at:
http://babsandmickieco.myshopify.com/collections/clothing-all/products/sana-dress#
As I've demonstrated in this JSFiddle, it really is a case of just appending an in flow element onto the list item. In the example I have provided, I used the following jQuery code to append a paragraph element (P) to a List item element (li).
Snippet
$("#clickAble").click(function(e) {
$("#clickList").append($("<p id='appended'>Hello</p>"));
});
As you can see, it's fairly obvious what his does. This created something of a rough example, but it's a working example nonetheless.
I currently have a navigation that is based on the bellow image. (sorry about the terrible sketch) I have a tab along the top called "films" that is also classed as a department.
I would like the tab "films" to open the sub cat films located in the department tab as though the mouse was hovered over that.
Currently the department "films" is a list item under an ordered list of department and has an ID of MM05.
The tab "films" is again another li in an unordered list for the top bar that originally had its own drop down.
Not sure how I can get around this!
This is sadly not possible just using CSS as "Cascading" means that you can only go downwards with your selectors.
You would have to use Javascript for this.
This would look something like this
<script>
var linkToOpenDropDown=document.getElementbyId("filmLink");
var dropDown=document.getElementbyId("dropDownList");
linkToOpenDropDown.onmouseover=function() {
dropDown.style.visibility='visible';
};
linkToOpenDropDown.onmouseout=function() {
dropDown.style.visibility='hidden';
};
</script>
From your drawing, I am thinking you will have a static DIV that holds a sub menu. So on click it would "visibility: hidden / visible" change to what you need. I assume that is the location where you want it to show, so mouse over wouldn't work since you can reach it from the button location with out going mouseout...
Please do provide little more code or info on this, thanks.
If i understood correctly, I would make that a onclick (show, hide) type DIV, and have that div with LI use onMouseOver Show / Hide additional panels
This problem refers to the main (header) nav menu on THIS PAGE.
When any of the items in the "Services" drop-down submenu is clicked, I want the "Services" page to open (in the existing browser window) AND for a specific anchor tag element on the "Services" page to be in focus. I've achieved this OK. BUT, when the targetted anchor tag is in focus, I want it to also behave just like a manual mouse hover had been performed on its parent div, ie there should be a slide-down of text corresponding to the focussed element.
For a manual demo, go HERE and hover on one of the vertical list items - text will slide down to the right of the list.
HTML for the "Services" submenu link:
<li> collaborative law</li>
HTML for the targetted "a" tag and its parent div (ie "a" tag that should be in focus on "Services" page):
<div id="mylist1"><h3>Collaborative Solutions</h3></div>
Script to drive the hover behaviour of the focussed "a" tag and its parent div:
//fades in desired text after fading out whatever text is already displayed:
$(document).ready(function() {
$('#mylist1').mouseover(function() { //note first list item must be called mylist1 to avoid conflict with other code
if ( !$('#text1').is(":visible") ) { //prevents re-display if desired text already displayed
$(".shownText").slideUp(100).removeClass('.shownText');
$('#text1').slideDown(300, 'linear');
}
});
//capture click events as well:
/* $('#mylist1').click(function() {
if ( !$('#text1').is(":visible") ) { //prevents re-display if desired text already displayed
$(".shownText").slideUp(100).removeClass('.shownText');
$('#text1').slideDown(300, 'linear');
}
});*/
//capture focus events on <a> as well:
$('#myTag1').focus(function() {
if ( !$('#text1').is(":visible") ) { //prevents re-display if desired text already displayed
$(".shownText").slideUp(100).removeClass('.shownText');
$('#text1').slideDown(300, 'linear');
}
});
});
Note the main nav menu has been created using jquery, via a Dreamweaver extension.
What I have so far:
When the "Services" page opens, the correct target is in focus (as shown by the browser address bar). However, this focus is not triggering the expected text slide-down event. When I hit tab, the next list div goes into focus (as expected) & the appropriate text slide down occurs.
Am I hoping for too much? Have I misunderstood the limitations of 'in focus'" Will Mt Hotham have a killer snow season this year ?
Your sage advice is greatly welcomed!
Kirk
I'm not sure your use of "in focus" is quite what I expect... Having a fragment in the url doesn't necessarily give focus to that element, it just moves the display down to it. I assume the reason it works for tabbing is that tabbing does focus on elements and I assume it starts at the element that has been scrolled to.
What I'd suggest is breaking out your display script into a named function (so it can be used from elsewhere) and then on page load you can pull out the fragment from the url (eg #famLaw). Using that fragment you should be able to find the right element on the page and focus it.
It should be noted also that pulling the display text into a separate function has the advantage of consolidating your code - you are basically duplicating the code in the onfocus and onready events so breaking it out makes for easier maintenance and reuse. :)
P.S. I guess yes for Mt Hotham. I'd never heard of it before but I'm going to be optimistic.
Is there a a way to hide the arrow in a standard dropdown select fieldset?
Fiddle link
I have an autocomplete system where you fill in the organisation number of a company and it finds the info based on a database. I'd like to have the select box, but without the arrow..
I need it to do this as it's a double function form, either you can fill in your ORG nr or just manually type it in, pretty simple, probably used all over the internet.
Thanks :)
Kyle,
Usually autocomplete systems use input text elements instead of a select element. This creates what you are trying to achieve. Google is a classic example of this.
If you want, you can take a look at jQuery's autocomplete plugin to get another example and some code ideas, or whatever. http://docs.jquery.com/Plugins/Autocomplete
It's not easy, but you can fake it by putting a button above a Select that has its size property set to a value greater than 0.
Have the Select hidden and positioned absolutely under the button. Clicking the button shows the list. Selecting the list changes the text on the button and re-hides the Select.
This way you need a text box, because you cannot type anything in <select> tag.
And put an onclick event to this box to open autocomplete with all possible values.