Is it possible to make a link such that it brings up the REL of a topic,
for example if a link is
Click here
Is it possible to have a user link so when they go to the page it automatically opens the lightbox?
For example http://example.com/?rel=lightbox&src=picture.jpg
or something like that?
Yes, but no browsers include a lightbox, so you'd need to write or find code to make one of those as well.
Yes, it is possible. You may better use URLs like http://domain.com/#lightbox, and write a little script:
//jQuery sample
$(document).ready(function() {
if (location.hash == "#lightbox") {
//Just show your lightbox manually
}
});
you can do that with a bit of jQuery
$(a[rel=lightbox]).click(function(e) {
// open the lightbox with the link url inside
return false
});
Related
We'd like to show a "Loading..." image when the page is still being transferred. Pages can get quite large in our application. I tried with a separate page that displays the image and then loads the intended page, but the animated GIF just stops.
Can something be done on the page itself?
Or is there a better way?
Thanks for your comments, as always!
UPDATE
Here's the general idea of my small switching page:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xc="http://www.ibm.com/xsp/custom">
<xp:div
style="width:84.0px;height:84.0px;position:fixed;top:50%;left:50%;margin-top:0px;margin-left:0px;height:0px;width:0px;z-index:1000"
id="AjaxLoader">
<xp:image url="/loading.gif" id="image1">
</xp:image>
</xp:div>
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[XSP.addOnLoad(function() {
var href= getParameterByName("href");
location.href= href;
});]]></xp:this.value>
</xp:scriptBlock>
</xp:view>
Loading a "loading" page prior than the one you want to load is not an option.
You can create to DIVs in your HTML: one for the loading icon (e.g. with id="loadingIcon"), second one for the content (id="contentWrapper"). The second one is hidden (CSS style="display:none").
Define a Javascript function like this:
function pageLoaded(){
document.getElementById("loadingIcon").style.display = "none";
document.getElementById("contentWrapper").style.display = "";
}
The script is called in the BODY's onLoad event like this:
<body onload="pageLoaded()">
...
</body>
It is not a question of the web-server environment, but how you organize your code :-)
Take your approach and modify it slightly. Instead of location.href = href - which just triggers a reload, use an ajax call and replace your loading div. Something like this:
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[XSP.addOnLoad(function() {
var href= getParameterByName("href");
$.ajax({
url: "test.html",
context: $("#{id:AjaxLoader}");
}).done(function(result) {
$( this ).replace(result);
});
location.href= href;
});]]></xp:this.value>
</xp:scriptBlock>
(contains typos, adjust as needed)
To answer my own question: No, it's not possible, but there is a nice way around this, in my case anyway.
The trick is to open a new browser window, write something in it and then allow the new page to load.
var w= window.open();
w.document.write("<div style='position: fixed; top: 48%; left:40%'>Loading...</div>");
w.location.href= url;
If necessary the text can be replaced by an image and the new url can be set after a timeout.
I wonder if someone can guide me on how to remove the url label that appears at the bottom of the page when you hover over an anchor (I wonder if it's even posible). I've googled a lot and didn't find any answers.
Suppose I have
<a href="www.somepage.com" title="The Page">Link< /a>
in the bottom of the page there will appear a tooltip/label showing "www.somepage.com".
Please see here for an example
Thanks in advance!
You can use either Javascript or JQuery.
For example, you can set to A attribute "href=#" and add an attribute url=www.somepage.com something like this:
Link
If you click over this nothing happen.
Now, you need to apply with javascript or JQuery click event. The next example is using JQuery and Javascript:
At the bottom of page's body:
<script>
$('#link').click(function() {
var url = $(this).attr('url');
window.location.href=url;
});
</script>
You know those webcams you can control over the internet? When you push the button to go left, it moves to the left.. but nothing else happens on the page.. Thats what I need to create.
I have a page that allows me to control lights in my house. When I click the button, I now have it load the php script (that controls the light) in a separate frame.. but I want to get rid of this. So basically I want to create a link that will call the php in the background, but that link won't do anything to the page its on.
Any ideas?
Use a return false; in the click event:
Not Follow the Link
Explanation
The return value of an event handler determines whether or not the default browser behaviour should take place as well. In the case of clicking on links, this would be following the link, but the difference is most noticeable in form submit handlers, where you can cancel a form submission if the user has made a mistake entering the information.
The modern way of achieving this effect is to call event.preventDefault(), and this is specified in the DOM 2 Events specification.
You will need to use ajax to achieve such a behavior.
Links that don't do anything are basically HTML links where you bind the onclick event to a JavaScript function which returns false. This makes the links "do nothing" but still executes the JavaScript which tells the camera to go left/right.
HTML 5 let's you officially use anchor elements without a href attribute. But I would just bind a Javascript event listener to whatever element your already have. I'd even add these kind of interactive elements themselves to the DOM with Javascript, since they don't serve any purpose if a user has JS disabled.
...
will give you text that looks like a link.
If it's not really a link you may wish to consider a different kind of styling to emphasize the point and so that other underlined links show as links and this shows as something else. All depends on your needs and the situation.
I like jquery...
You will notice that the onclick function returns false. This is to stop the link from working...
<a onclick="do_it(this)" ...
then in your js
function do_it(anchor)
{
jQuery.ajax(
{
url : anchor.get_attribute('href'),
data : {whatever},
type : 'POST',
success : function(data)
{
alert('woo');
}
}
)
return false;
}
Pretty much what I'm doing here is:
So when the anchor is clicked jquery POSTs to the anchor's url. You can include data if you need to. This happens asynchronously so nothing happens on your page until jQuery gets response html(or whatever). If you want to do anything with the response you can get hold of it in the success function.
When the function returns it returns false, thus preventing the anchor from doing it's usual thing.
you talking about the javascript, create a onlick event / function and implement AJAX in specific DIV area
please check this out:
http://www.w3schools.com/ajax/ajax_examples.asp
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
//You need `ajax_info.txt` file with some content
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>
</html>
You can use the following jquery solution:
HTML:
Move lights to left
JQUERY:
<script type="text/javascript">
$(document).ready(function() {
$('#link1').click(function(e) {
e.preventDefault();
$.ajax( $(this).attr('href') );
});
});
</script>
Can't believe no one has posted this yet. just use javascript void:
some click function
Its one of the oldest tricks in the book!
You need Ajax to retrieve datas from PHP without loading another page.
To "disable" the link:
Link
Or:
Link
Or just write a normal link and use jQuery (or another library) to add the event:
$('a').click(function(event) {
// the code with ajax
event.preventDefault();
});
Using mootools.js 1.3.2 and mootools-more.js
As far as I can tell this is supposed to reveal the div and also hide the content and linkTab divs at the same time.
$('blogLink').addEvent('click', function(){
$('homeLink').removeClass('active');
$('linkTab').removeClass('active');
$('blogLink').addClass('active');
content.slideOut();
linkTab.slideOut();
blogLink.slideIn();
});
This is the HTML
Blog
<div id="blogContent">
content here
</div>
It all works properly and that's OK but in addition to this, I also want to be able to give people a URL like http://mysite.com/#blogLink and have that blogContent div opened. When I do that now, it takes me to the top of the page and the blogContent div is hidden.
How do I do achieve that? I did try adding the mootools-smoothscroll.js and using the method outlined here http://davidwalsh.name/smooth-scroll-mootools but that just broke the entire page - would not load properly.
I have zero experience with mootools and weak on Javascript so please excuse me if I take a while to 'get' what you're trying to explain.
Many thanks.
First, are you particularly attached to MooTools? If you're a JavaScript newbie, jQuery is probably easier to use and definitely has a larger support community. But I'll post a solution that should work in MooTools for now:
If I understand you correctly, what you want to achieve is the following:
The anonymous function you posted will run when "Blog" is clicked
The function will also run if someone visits the page with #blogLink in the URL.
That's not too difficult to achieve:
// Once the DOM has loaded - so that our elements are definitely available
window.addEvent('domready', function() {
// Check for #blogLink hashtag, and reveal blog
if(window.location.hash == 'blogLink') { revealBlog(); }
// Make sure blog is revealed when link is clicked
$('blogLink').addEvent('click', revealBlog);
});
function revealBlog() {
$('homeLink').removeClass('active');
$('linkTab').removeClass('active');
$('blogLink').addClass('active');
content.slideOut();
linkTab.slideOut();
blogLink.slideIn();
}
You could also change your link mark-up to:
Blog
To make sure they're always on the correct link when the blog is revealed.
I have a Joomla site which uses mod_rewrite to create pretty urls.
http://www.example.com/resources/newsletter
However this created a problem. Including images like this: src="images/pic.jpg", it would then look for a file at:
http://www.example.com/resources/newsletter/images/pic.jpg
...which obviously doesn't exist. To work around this, I included a <base> tag in my head section:
<base href="http://www.example.com/" />
...which worked fine, until I tried to do a link to an anchor point (bookmark) on the same page:
<!-- on http://www.example.com/resources/newsletter -->
go to the footer
<!-- clicking that link takes you to http://www.example.com/#footer -->
Changing my links to be <a href="resources/newsletter/#footer"> is not feasible, since I won't necessarily know the URL of the page when editing it. Is there any way to make some links ignore the <base> directive?
Though I'd really prefer a straight HTML solution, I'm using jQuery on this site already, so that could be an option if I'm stuck.
Is it possible to change your src attribute to be something like /images/pic.jpg? That'll achieve the effect you're looking for.
If that's not possible, this (untested) jQuery code should work for you:
$('a[#href^="#"]').click(function() {
var hash = this.hash, el = $(hash), offset;
if(!el.size()) {
el = $("[#name=" + hash.slice(1) + "]");
}
offset = el.offset();
window.scroll(offset.left, offset.top);
});
Old question, new answer..
Try this:
$('a[href^="#"]').on('click', function (event) {
event.preventDefault();
window.location.hash = $(this).attr('href');
});