Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I would like to implement this type of behaviour:
on the left side of the page, there is a navigation with links, and on the right side of the page there is a blank div. When user clicks on link, content on the right changes. Same should happen with all other links.
My question would be, what is the best way to achieve this? I was thinking about JQuery tabs, and just style tab's title to look like a link, but there is a gap between these two divs, so I guess it is impossible.
You don't need to use jQuery tabs for that.
Take in mind, that SF isn't a source of scripts, so, you should try something before and post your doubt after with some code to be analysed for whose maybe will help you.
You have many alternatives to do that, but, based in what you said. I undestood that you want do it only with javascript, right?
So, you can use jQuery like this to achieve that.
jquery
$(document).ready(function(){
$('#left-side a').click(function(e){
e.preventDefault();
$.ajax({url: $(this).data('target'), dataType: 'html', success: function(result){
$("#right-side").html(result);
}});
return false;
});
});
html:
<div id='left-side'>
<ul>
<li><a href='#' data-target='aa.html'>Page 1</a></li>
<li><a href='#' data-target='page2.html'>Page 2</a></li>
<li><a href='#' data-target='page2.html'>Page 2</a></li>
</ul>
</div>
<div id='right-side'>
</div>
Every time you click on some link, this script will load the defined page with ajax. I suggest you to use server side to achieve this, but, this also works.
Hope it helps you.
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
I wanted to click on an image, which will call a javascript function. The function is intended to change from one page to another web page on the same site. I don't want to open() a new page, but an existing page within the current site.
I tried using an anchor tag, with the href targetting the url of the destination. But I dont want an anchor, I want to use a clickable image.
I also tried the window.open() method but ended up with lots of opened windows!
I then tried donuts "window.location.replace(newUrl);" which worked instantly. How do I vote-up donuts advice from pure time ago? Can't see no up-arrow to the left of the post?
You don't need JavaScript to make a button or image into a link.
For an image, as others have pointed out in the comments, just do
<img src="...">
For a button, see How to create an HTML button that acts like a link.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
As a disclaimer, I'm quite new to web development and even before I posted this, I have spent hours looking for answers but everything I have read did not help on what I want to do.
I'm basically trying to redirect to a certain page and then execute a php function which also require a variable to be pass to it and is inside a class.
I've read about ajax but people have said that theres no point using it if I want to redirect to another page anyway as its only good to use if you just want to reload a portion of the page.
The most simplistic way I can explain on what I want to do is, when I click on an image, I would like for a new page to be open and then in that said page is all the things about that image. For example, description about it, a short vid and maybe a comment section regarding the image clicked.
Please explain if what I'm trying to do is not possible and if so, please point me in the right direction as to what might be a better way of doing this.
You can just link to a php page and pass a request variable.
Link
// myPage.php
<?php echo($_REQUEST['someVar']); ?>
This will output "someValue" on the new page.
here's a really simple example:`
<img src="test_image.png" alt="your alt"> <!-- Simple link with a id attribute -->
`
On the PHP side:
image_infos($_GET['id']); //Call the PHP function with the image ID
function image_infos($id)
{
//Get your infos from the Server or whatever
}
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I load a web page from the internet (say www.google.com or whatever). This page is written in HTML. Suppose in this code there is this fragment.
<ul class="CLASS">
<li>
<div class="DIV1"></div>
</li> //Hide this li
<li>
<div class="DIV2"></div>
</li>
<li>
<div class="DIV3"></div>
</li>
</ul>
I want to know if there is a way to hide the section (the li section) that I mention in the previous code ("Hide this li") as soon as I load the page. In my screen, I don't want to execute the section li that I mention.
I did some research and I think that the Firefox extension Greasemonkey does it. What will be the script to add to do this ? Or, there is a different way (without Greasemonkey).
It's not possible using only html and css. I would do it using javascript and a library (I use jQuery):
$(document).ready(function() {
$('li a[href=SOMETHING1]').parent().hide();
});
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I am looking for a pure Javascript/JQuery solution for Link Highlighting. It would highlight the link in such a way that if you were on the same page as the navigation link it would stand out amongst the others. The reason for the Javascript solution over css is due to an experiment on making a webpage through the use of heavy Javascript/JQuery code. I am not looking to integrate or add this to any site/code I am writing. I only want to be given proper examples to further my knowledge of Javascript/JQuery and to quench my curiosity.
Small example of a navigation bar that is on the page 'Example 3'.
http://jsfiddle.net/hPhzB/
Html:
<nav>
Example 1
Example 2
Example 3
Example 4
Example 5
</nav>
Short Story:
Using javascript make a navigation system that
Can figure out what page it is on
Link that page to the navigation link
Style that link so it stands out
you can use a regex in the class of the content container on a page (or the body element).
check out: http://fiddle.jshell.net/UeNdJ/
<ul>
<li id="m1">menu1</li>
<li id="m2">menu2</li>
<li id="m3">menu3</li>
</ul>
First of all, dont use js for things that you can do simply with css. css is much cheaper than js. but if you really want to do this with js, you can set css with js.
$('#m2').css('background-color','blue');
but again, this is not the elegant way of doing this. this makes me unhappy.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
Help needed to understand the source code...
I visited the website bseindia.com some time ago and when i was checking for its coding i couldn't understand the action performed when you click on the buttons aligned horizontally at the top (About BSE, Markets, etc). The anchor have href attribute with value only "#". I could use something like that in my upcoming project so i would appreciate some help.
please tell the use of empty "#" in anchor tags href does and if any other language like Server-side etc then please do tell me.
This is a common practice. Actually these kind of links are used more like "buttons". I mean, the url will not change, but some action will happen, based on the javascript implementation.
Please read this post, to learn more: Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?
please tell the use of empty "#" in anchor tags
It is a relative URL to the top of the current page.
If anything else happens when the link is clicked, it is because client-side JavaScript is involved.
Binding JS to links to the top of the page is a common practise, but a poor one. It is neither Progressive nor Unobtrusive.
The # is to keep the styling of the link (I think that is what it is for, not sure). An action takes place because javascript registers event handlers on the link, such as this:
html:
test
javascript:
document.getElementById('test').onclick=function(){
alert('you clicked it!');
}
here is a jsfiddle: http://jsfiddle.net/fZ2JQ/