I'm trying to link to content from an external page, using
<a name="anchor"></a>
and
The content where the anchor is located is hidden inside a drawer, using jQuery:
$(".toggle_container").hide();
See fiddle: http://jsfiddle.net/bd1mbu5j/1/
I've tried wrapping my head around the method found here, but I know there's something I'm missing.
window.onload = function() {
var hash = window.location.hash; // would be "#div1" or something
if(hash != "") {
var id = hash.substr(1); // get rid of #
document.getElementById(id).style.display = 'block';
}
};
Also should be noted, I'm not just trying to open the drawer, but link to specific content within certain drawers.
See this fiddle http://jsfiddle.net/bd1mbu5j/2/
$(".toggle_container").hide();
$("h3.trigger").click(function(){
var _this = this;
$(this).toggleClass("active").next().slideToggle("normal", function () {
var anchor = $(_this).data('anchor');
console.log(anchor);
if (anchor && $('#'+anchor).length) {
console.log($('#'+anchor).offset().top);
$('html, body').animate({scrollTop: $('#'+anchor).offset().top+'px'});
}
});
return false; //Prevent the browser jump to the link anchor
});
I added the target element id as a data attribute and picked that up once the slide toggle was finished. Then I animated down to that element if it exists.
Related
jquery:
$(".container").on("click", function(e) {
e.preventDefault();
var currentBox = $(this).siblings(".map").toggleClass("active");
$(".map.active").not(currentBox).removeClass("active");
});
html:
Because of this i cant use href anymore.
I use the jqueryto show more links.
It appears that you're trying to use div's and p's like anchors (a). href is not a valid attribute of div or p.
If you're trying to store data in the div and p tags, use data-href="" in conjunction with window.open()
Based on the limited code provided, my guess is that you're trying to do something like this:
$(".container").on("click", function(e) {
e.preventDefault();
const $this = $(this);
$(".map.active").removeClass("active");
$this.siblings(".map").toggleClass("active");
let href = $this.attr("data-href");
// Open a new window
window.open(href);
// OR
// Navigate without opening new window
window.location.href = href;
});
Or, you could skip the jQuery all together an just use anchor tags as they're designed to be used.
You can use jQuery for get any attribute of elements. So if you want to use href, just do:
var new_location = $('a').attr('href');
So you can do anything by click on a tag and at the least redirect to href path by:
window.location.href = $(this).attr('href');
Note: $(this) point to current clicked a tag. So you have something like this:
$(".container").on("click", function(e) {
e.preventDefault();
var currentBox = $(this).siblings(".map").toggleClass("active");
$(".map.active").not(currentBox).removeClass("active");
window.location.href = $(this).attr('href');
});
On our website, we have a page where we have 5 images that are buttons. When you click each button, more detailed information appears using the onclick function.
What we would like to do is pull the anchor information from the URL www.example.com#program and then use that anchor to specify which onload we want to load.
So in theory, www.example.com#program would execute this:
<img src="program.png" width="159" height="115"
onload=
"ShowHide('ACE', 'hidden');
ShowHide('program', 'visible');
ShowHide('ACE2', 'hidden');
ShowHide('ACE3', 'hidden');
ShowHide('ACE4', 'hidden'); "/>
And www.example.com#ACE would execute this:
<img src="ACE.png" width="159" height="115"
onload=
"ShowHide('ACE', 'visible');
ShowHide('program', 'hidden');
ShowHide('ACE2', 'hidden');
ShowHide('ACE3', 'hidden');
ShowHide('ACE4', 'hidden'); "/>
Any help would be greatly appreciated!
If you watch for changes to the hash you can do this more dynamically:
var sections = ['ACE', 'program', 'ACE2', 'ACE3', 'ACE4'];
window.onhashchange = function(evt) {
var hash = location.hash.substr(1);
// iterate sections and make section at location.hash visible
sections.forEach(function(section) {
var visibility = 'hidden';
if(section === hash) {
visibility = 'visible';
}
ShowHide(section, visibility);
});
};
You can view a demonstration of this here: https://jsfiddle.net/a41j5ed7/, open up the console to see which item is visible and which are hidden.
Since you already have an onclick setup for each image button, you will need to update the hash when the user clicks the button. You didn't post the code that handles the image button clicks, but it will be something like:
imageButton.onclick = function() {
// whatever you are currently doing when the user clicks the image button
location.hash = 'ACE'; // or whichever button they clicked
}
I'm modifying a wordpress site and have a menu with four anchor tags (buttons) to the left of a slider. When a user selects a button, the slide associated with the button shows. Now, I'd like to open a page when the user clicks the button, instead of showing the slide. Here is the code so far:
$('#slidernavigation > a').on('click', function(e){
e.preventDefault();
$a = $(this);
$(this).showSlide();
if($a.id == $('#slide-1285')){
console.log('testing');
}
else{
console.log('not-testing');
}
});
Here I'm testing to see if I can click on the anchor with the id '#slide-1285' and log it to the console. It always says 'not testing'. I'm going to set up conditions for all id's so a user is redirected to the correct page. Something like this:
$('#slidernavigation > a').on('click', function(e){
e.preventDefault();
$(this).showSlide();
if($a.id == $('#slide-1285')){
window.location.href = "http://webpage1";
}
elseif($a.id == $('#slide-1286')){
window.location.href = "http://webpage2";
}
elseif($a.id == $('#slide-1287')){
window.location.href = "http://webpage3";
}
else($a.id == $('#slide-1288')){
window.location.href = "http://webpage4";
}
});
Any ideas? Thanks in advance.
To get the id of the element that was clicked, you can do:
$(this).attr('id');
That will return a string. So you could do:
if($(this).attr('id') === 'slide-1285') { do something }
$('#slide-1285') would return a jquery element, but you want just the id. I think the code above is more what you are looking for.
You can add a new data attribute to each of your link and then get that value and redirect.
<a data-webpage="http://webpage1" href="whatever" id="slide-123"></a>
<a data-webpage="http://webpage2" href="whatever" id="slide-456"></a>
.....
and then
// this will bind all ids starting with slide-
$('[id^=slide-]').on('click', function(e){
// some code.
window.location.href = $(this).data('webpage');
}
1) you are comparing $a.id, that is string, to object $('#slide-1285');.
2) To simplify:
$(document).ready(function(){
$('.a').click(function(e){
e.preventDefault();
window.location = $(this).attr('href');
});
});
<a href='http://google.com' class='a'>Google!</a><br/>
<a href='http://stackoverflow.com' class='a'>SO!</a><br/>
jQuery objects have no id property. You need to do attr('id'), or just get the id property of the plain DOM object. Additionally, jQuery objects are never going to equal each other. Third, you want to check if the clicked element has a certain ID, which can be done using .is().
In sum, you could do one of these:
Comparing strings:
$('#slidernavigation > a').on('click', function(e){
if(this.id == '#slide-1285'){
console.log('testing');
}
else{
console.log('not-testing');
}
});
Using .is():
$('#slidernavigation > a').on('click', function(e){
if($(this).is('#slide-1285')){
console.log('testing');
}
else{
console.log('not-testing');
}
});
Or, just let the browser do its thing. Give your <a>s href attributes, and they'll function as links, even without JS.
instead of writing $.id
you should write
$a.attr('id')
and this should be checked like this :-
if( $a.attr('id') == slide-1285)
not the way you are doing :)
Try
var pages = [{"slide-1285" : "http://webpage1"}
, {"slide-1286" : "http://webpage2"}
, {"slide-1287" : "http://webpage3"}
, {"slide-1288" : "http://webpage4"}
];
$('#slidernavigation > a').on('click', function(e) {
e.preventDefault();
var nav = e.target.id;
$.grep(pages, function(page) {
if (nav in page) {
window.location.href = page[nav];
}
})
});
jsfiddle http://jsfiddle.net/guest271314/2nf97dfr/
<div id="a">
dhjdfd
</div>
$('#a').on('click',function(e){
var clickedElement= e.srcElement;
if($(clickedElement).attr("id") == "abc"){
//do something
}
});
just use e.srcElement to get the element reference and then get its id.. and btw u can use switch case rather than multiple if else statements ..
working fiddle link
I have a link that expands to reveal a div when clicked - however, if I have more than one on a page, if I click for eg. the third, it'll open the top one. How do I target the one clicked rather than the first/highest on the page.
$("body").on("click", ".show-hidden", function() {
var $link = $(this);
var $slidingElement = $($link.attr("href"));
if( !$slidingElement.is(':animated') ) {
$link.toggleClass("shown");
$slidingElement.slideToggle( 700 );
}
return false;
JSFiddle: http://jsfiddle.net/TrueBlueAussie/j4wDL/1/
This one works. Can you explain how your layout differs from the mockup I have provided?
$(document).on("click", ".show-hidden", function () {
var $link = $(this);
var $slidingElement = $($link.attr("href"));
if (!$slidingElement.is(':animated')) {
$link.toggleClass("shown");
$slidingElement.slideToggle(700);
}
return false;
});
The most likely cause is incorrect hrefs as they would need to include a valid JQuery selector (e.g. href="#one")
After clicking on the link, Click Me, the page scrolls back to the top. I do not want this. How can fix it?
Example: http://jsfiddle.net/Y6Y3Z/
Scroll-bar:
function myalert() {
var result = true;
//var hide = $('.alert').fadeOut(100);
//var css = $('#appriseOverlay').css('display','none');
var $alertDiv = $('<div class="alert">Are you sure you want to delete this item?<div class="clear"></div><button class="ok">no</button><button class="cancel">yes</button></div>');
var link = this;
$('body').append($alertDiv);
$('.ok').click(function () {
$('.alert').fadeOut(100);
$('#appriseOverlay').css('display', 'none');
callback(true, link);
});
$('.cancel').click(function () {
$('.alert').fadeOut(100);
$('#appriseOverlay').css('display', 'none');
callback(false, link);
});
$alertDiv.fadeIn(100);
$('#appriseOverlay').css('display', 'block');
return result;
};
$('.click').click(myalert);
function callback(result, link) {
//
if(result){
}
}
You only need to change the "#" to "javascript:void(0)" on HTML code:
Click Me
Another solution is add a "/" after the "#":
Click Me
The reason that it is going to the top of the page is because your anchor tag has a hash symbol as the href. The hash syntax allows you to refer to a named anchor in the document, with the link taking you to that place in the document. The default action for an anchor tag when you click on it and the href refers to a named anchor that doesn't exist is to go to the top of the page. To prevent this cancel the default action by returning false from the handler or using preventDefault on the event.
function myalert(e) {
e.preventDefault(); // <-- prevent the default action
...
return false; // <-- alternative way to prevent the default action.
};
simply prevent the default function (jump to #marker) from executing: http://jsfiddle.net/Y6Y3Z/1/