Given an html page with several anchors defined. Is there a way to show in tooltip part of this page between two specified anchors? And, how?
You can assume the html page is something like this:
<body>
<div>this is some text with tooltip when hovering</div>
<a name="a1"></a>
....
<a name="a2"></a>
....
<a name="a3"></a>
....
<a name="a4"></a>
</body>
So I want to hover on the div and see in the tooltip an html page between the two anchors a2 and a3.
The answer to this question gives a good way to show without using javascript, but just html and css. I would really prefer not using javascript, but please feel free to use it if that can greatly ease the task, and if you do so, please use no more libs other than jQuery.
Related
I've been digging around on how to do it, but didn't find any solution which would fulfill my needs.
Got a basic layout of my page with menu on the left, separate div for header and a div in the middle where all the content should be displayed when one of the menu buttons is selected.
I'd like to change the content only of the "content" div dynamically without reloading the page when one of the menu buttons is pressed.
I've managed to do it as per below with jquery:
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$('#nav ul li a').click(function(){
$('#main').load('contents.html #' + $(this).attr('href'));
return false;
});
});
The menu :
<nav id="nav">
<ul class="menu">
<li class="menu1"></li>
<li class="menu2"></li>
<li class="menu3"></li>
<li class="menu4"></li>
<li class="menu5"></li>
</ul>
</div>
</nav>
contents.html file sample:
<div id="menu1">
<h2>Menu1</h2>
<p>Menu1 page contents</p>
</div>
So when menu1 button is pressed I'm able to change the content of main div to reflect the relevant data - this works.
My questions are:
1) is this the correct way on how to do it ? If not what would you recommend ?
2)I want to display more advanced stuff not only text (e.g What if I want to have another jquery in the div-id="menu1" ? I've tried it and it didn't work.)
P.S - I'm just a beginner so maybe I've missed something basic - but couldn't fix it by myself.
Thanks in advance!
Peter
I think there are a number of ways to achieve what you want. It depends on the nature of the content you want to load.
If there isn't masses of it, you could load it all onto the page on page load within different div's and then just show and hide the relevant div when clicking the menu items. (have a look at twitter bootstrap for some implementations, things like tabbed browsing).
If you do just have text, you could use ajax to load in the data from an external file w3schools.com.
Alternatively as mentioned in a comment above, you could create a single page application using something like angular.js, knockout.js etc.
Hope that helps.
So, I run my church's website and I try to stay pretty basic in the coding, but we have seasonal pages that we add and remove from the website all the time so I get tired of changing the "simple" HTML code on every page for the nav bar. I have found where I can use PHP and have one code, like but is it possible to have the current page highlighted, i.e. on our website now, the current page name is bold and a different color.
I have also seen JS do this (Highlighting current page in the nav) but I don't really understand how to implement this, so if you think this could be the better route for me, and can help explain how to do it, that would be cool.
Any help would be great!
add an id attribute to the body tag of each of your pages, like this:
<body id="home"> <!-- this would be for your home page for example -->
...
<body id="about"> <!-- this would be for your about page... -->
add the same to the li tags of your nav, like this:
<li id="home">Home</li>
<li id="about">About</li>
then in the CSS file just do this:
body#home li#home, body#about li#about { // style of the active menu item }
Ok Im trying to do a few different things but they are all pretty simple. I can only find answers that somewhat give a piece of what Im trying to do and when I mix and match different answers they don't work well together. I figured it would be better to ask specifically.
The hidden divs on the bottom are filled with images so I only want them to load when a link is clicked and not when the page is loaded. Each hidden div will have three divs of its own that target the three top divs so when you click the link for that hidden div all three of the divs in that hidden div load into the three top divs. I'm pretty sure I know how to make one link trigger different events so you don't have to help me there unless you know a simpler way to do this. Here are the main things I need help with:
loading div content only on click and not page load
targeting a div to load other div content into
when link is clicked to open a new hidden div, the other hidden div that was showing goes away
and because this is a tech website it would be nice to have some kind of tech-y transition when switching between/loading new divs. If nothing else a fade would work but you don't have to help me with this part, just if you happen to know a code or webpage with different transition effects for loading content that would be nice.
I don't really have any pre written code yet that will conflict with whatever you suggest so you can suggest anything. You don't have to write everything out, I can catch on with an example. Maybe.
Thank you I know there are separate individual answers but again I have had trouble trying to get them to work together or they will do part of what I need but not the other. I thought if I just asked instead someone could whip up a code for me in like 5 minutes. Thanks.
edit: Ill add code but I don't think it'll help much.
<div id="menu"> <a> -Cyber glasses Link- that opens cyberglasses div and loads it into presentation div </a></div>
<div id="presentation">
<div id="div-pic-1">Empty space to load stuff into</div>
<div id="center-content">Empty space to load stuff into</div>
<div id="div-pic-2">Empty space to load stuff into</div>
</div>
<div id="cyberglasses">(this div does not appear on pageload and only loads on click of the menu link named "Cyber glasses Link" at top of page)
<div id="cg1"> picture 1 of cyber glasses to load into id div-pic-1 </div>
<div id="cgcontent"> description of cyber glasses to load into id center-content</div>
<div id="cg2"> picture 2 of cyber glasses to load into id div-pic-2<div>
</div>
The menu link at the top named -Cyber glasses Link- loads div cg1 into div-pic-1
and div cgcontent into center-content
and div cg2 into div-pic-2
all at the same time. But the only div that loads on page load is the presentation div and menu div not the cyberglasses div. Cyberglasses div only loads on click of the cyber glasses link.
<html>
<head>
<script src="jquery-1.10.2.min.js"></script>
</head>
<body>
<div id="navigation">
Welcome
Frog
Lamma
</div>
<div id="content"></div>
<div id="image"></div>
<script>
$(function(){
$('#navigation').on('click','a',function(e){
e.preventDefault();
$($(this).attr('rel')).load($(this).attr('href'));
});
});
</script>
</body>
</head>
</html>
Demo: https://oteck.co.uk/sample/load.html
I havent used Javascript in a while and I have almost forgotten it all but I would like to be reminded how to show and hide html div boxs to display hidden content by clicking on a text or such.
In this case I would like to have a hidden box filled with login information while the ahref link will be the indicator to tell the loginbox to appear or disappear and by knowing this I could easily apply it to the register area.
I would like to know how to do this or a pop up box sort of thing.
This is what I have so far:
Could anyone help me with this now. I can't seem to get it work.
The toggle is
Login
Showing content
<div class="signup" style="display: none;">
<p> test </p>
</div>
Javascript is
function showStuff(signup) {
document.getElementById('signup').style.display = 'block';
}
Why won't this work
Looks like the issue with your code is that your div has a class as 'signup' not an id.
try:
<div id="signup" style="display: none;">
<p> test </p>
</div>
See this jsfiddle for a working example with an additional fix to how your function works.
http://jsfiddle.net/aUQ6B/
Original Answer:
See: javascript hide/show element
Code to make note of is the following:
document.getElementById('myid').style.display
Setting this to 'none' hides the element.
Setting it to 'block, 'inline' or whatever the original value was will show the element.
I am playing around with djax when I click an anchor tag the url changes and when I view the page source it also changes but the page itself did not change its contents even if I view the page source it has change up any ideas why?
Here's a snippet of the markup
<body>
<div id="resultContent" class='updatable'></div>
<ul>
<li><a id="thankyou" href="views/thankyou.jsp?menuId=2"
targets="resultContent">Thank You Message</a></li>
</ul>
</body>
When I click that the url changes but the result is not showing but when I view the page source it displays the proper markup(or should I say the markup of thankyou.jsp)
here is the code that Is js code
jQuery(document).ready(function($) {
$('body').djax('.updatable');
});
I've had the exact same problem as you and discovered your question while I was looking for an answer. It may be too late for you but according to your markup I believe you ran into the same problem as me which is actually on the issue-list of the plugins Github site (at least right now).
You need to place your updateable div inside a wrapping div. For some reason exchanging content seems not to work for direct children of body. See https://github.com/beezee/djax/issues/22
So your HTML should look like this
<body>
<div id="djaxWrap>
<div id="resultContent" class='updatable'></div>
<ul>
<li><a id="thankyou" href="views/thankyou.jsp?menuId=2"
targets="resultContent">Thank You Message</a></li>
</ul>
</div>
</body>
While jQuery remains the same
jQuery(document).ready(function($) {
$('body').djax('.updatable');
});