Not sure if this can be done but I'm trying to redirect a url to a certain div. To give you more details of what I want to achieve is I have 1 page with 2 tabs and different url, I replaced that page with just 1 page and instead of 2 tabs I have the content just under each other. I few 3rd party websites link to these tabs so instead of sending the new url to them I was wondering if I can use those url's in the divs and when the user goes to the urls it redirect straight to that div.
In html you can do this
Div 1
<div id="div1">Loremipsum........</div>
and i want to do this
Div 1
<div id="div1 & http://www.gogle.com/div1">Loremipsum........</div>
Can it be done? I cannot find any documentation or examples.
Thanks
Hmmm I dont see your problem...
When you go to a page like www.example.com/index.foo#something (note the #something in the end - stackoverflow is reformating when i want to write it bold beacuse of the #) you will actually to the jump where the id "something" is placed. Try it out:
https://jsfiddle.net/8btkp706/
Something
<div id="something">
Soooooooooooo down below....
</a>
Related
I have several anchors on my one-page-design-site. Those who are animated by JavaScript do not work in screen-reader lynx.
Clicking one of these links always target the first anchor on this page.
As Javascript does not influence (normally) a screen-reader's behavior - what can I do?
#Allan: Thanks for trying to help!
So here is some code: The link to the main navigation, only seen by screen-readers jumps directly to the link with the id "mainnavi":
<p class="sreenreader-only">
Direct to Main Nav
</p>
Home
The link "Home" is animated to scroll down to the section "home", coded like this:
<section id="home">...</section>
That's all it is.
Hope this is helpful.
Please provide some code so I can provide better help.
My guess is : Make sure your anchors have unique names
Menu Item 1
Menu Item 2
<a name="name1"></a>
Content 1 .....
<a name="name2"></a>
Content 1 .....
I'm stuck since a long time so I'd like some help to solve my problem.
I have 2 pages. From the first page A, I have <a href> that link to an other page. Here is the link :
<div class="sucre" id="sucreFirst"><img src="_img/slide06.jpg" width="634" height="308" alt=""/></div>
On the other page B, I have a menu that hide and show content withe CSS class.
Here is the code for the menu :
<div id="menu_G">
<p>Le mariage de 2 expériences</p>
<p>Né d'une conviction</p>
<p>Des DRH militants</p>
</div>
As you can see, the page B is set to show the titre1 first.
<div class="ON" id="Titre1">content</div>
<div class="OFF" id="Titre2">content</div>
<div class="OFF" id="Titre3">content</div>
When I clic on the link from the page A i'll like it change property of the titre3 class to ON.
To resume, when I clic on the link from page A I'd like it show the titre3 content of page B.
I've tried many things but it always link to titre1.
Thanks for reading,
Alfred
Well, you have multiple ways to acheive your goal, so I'll give you an idea and a start point.
What you actually need to do is transferring information from the source page to the target page, the information transferred will be the element to turn ON and the elements to turn OFF.
One of the simple ways to send data between pages is by a URL Query String. You can create the Query String by simply adding it to the link.
Modify your link to:
href="ecole2.html?on=1&firstOFF=2&secondOFF=3"
The part from the ? is the query string, its structure is:
?key=value&key=value&key=value...&key=value
Now, when entering ecole2.html with this link, you'll be able to get those 3 variables (on, firstOFF and secondOFF) by a query string parser (you have many ways to do it).
Create a function which will get the parameters and will set the visibility upon them, something like:
function setVisibility(onElement, firstOffElement, secondOffElement)
{
document.getElementById(onElement).className='ON';
document.getElementById(firstOffElement).className='ON';
document.getElementById(secondOffElement).className='ON';
}
Call this function with each parameter when the page loads (onload event) and you're done.
<body onload="setVisibility(on, firstOff, secondOff)">
when on for example will be the string "Titre"+onParsedVariableFromQueryString
Here is a jsdiffle with a parsing URL function and actual parsing of three variables defined in the same way explained above. As the question is not directly about URL parsing, I see no need posting the actual parsing method code here.
With the above logic and examples I'm sure you can progress by your own.
I am using angularjs for part of my page say single component, which is used in many pages.Now my problem is hash url does not work now.
Example: I have a div#hello in my page and URL is given as Url#hello.but it does not go to that particular div just the top of the page is diaplayed.
So could you guys help me here please?
NOTE:The url#hello is changing to url/#hello.The page cannot be changed to angular and only that single component use angular.
EDIT: Thank you Stephen:) yes, of course, we need to use routing.The thing is, after page load, if we change the url back to URL#hello it works.So is it possible to do it in other way apart from Routing and $angularscroll ?(i.e) just from the JS or jQuery perspective ?
Ok, thanks. I've misunderstood you. I think I have a better understanding now. Please correct me if I am wrong:
So, you're essentially trying to make a hello link that points to a section within the same page. When you change the url to pageUrl#hello the page should jump down to the section with the id called hello.
But the problem is that since your section has an AngularJS component that uses the ngRoute module, this routing functionality is making your page redirect to pageUrl/#hello instead of jumping to the HTML section with the id='hello'.
Is this correct?
Solution
If I understand your problem correctly, the solution is to check if your ng-app='appName' attribute is on the body tag. If it is, then move it down to your component's parent element.
If a hash link is a child of the ng-app element, then when you click it AngularJS thinks you want to redirect to another view. This is what causes the Home link to redirect to pageUrl#/home.
<body ng-app="demoApp">
Hello <!-- redirects to #/hello -->
<div id="hello"></div>
<!-- ... -->
So if you put the hash link outside of the ng-app element then it will behave as expected when you click it.
<body>
Hello <!-- jumps to the 'hello' div -->
<div id="hello" ng-app="demoApp"></div>
<!-- ... -->
On Page Load
If you want the page to jump to the hello div on page load, then set window.location = '#hello' inside your controller. Then, when you visit pageUrl#hello, the hello div should appear instead of the top of the page.
If you don't have a controller, or don't want to use one, then after your document loads, check the hash url and change it programmatically.
$(document).ready(function(){
if(window.location.hash == '#hello'){
window.location = '#hello';
}
})
I have a piece of code like below
<div>
<ul>
<li>Test1</li>
-------
-------
-------
<li>Test46</li>
</div>
It displays the html page with 46 links. The issue is when i scroll down and select the 46th or the ones just above this the page is going back to the top again. why is it happening so and is there any way to prevent it ?
href is blank thats why its going at top. You can use this instead of keeping blank:
Test46
href="" contains the URL "" which is a relative URL that resolves to "the URL of the current page".
When you click on the link, the browser follows it and goes to the current page.
As is normal (absent of any specific directive otherwise), when it goes to a page, it starts at the top.
If you don't want to link to the page: Why are you using a link in the first place?
If you just want something to dangle JavaScript from, use a button instead.
<button type="button">Test46</button>
You can style it to remove the default background colour and border, and set the colour scheme to match that of a link if you want it to look like a link.
An empty string in the href attribute <a href=""> means in modern browsers to go to the current page. This will basically just reload the current page, and as such it will go to the top.
One way to prevent from going to the top is to use href="javascript:void(0)", as mentioned by #Manwal or you can simply remove the href attribute completely (note in that case it will not show up as a clickable hyper-link).
So I'm working on a Tumblr theme and i want the index (or home) page of the tumblr to display a div that I don't want the user to see on the following index pages.
For example, I want "myblog.tumblr.com" to have a big splash div with a tall height (let's call give this an id "homesplash"), while any pages under "myblog.tumblr.com/page/" to hide this div so the user can see the posts first. So like "myblog.tumblr.com/page/2", "myblog.tumblr.com/page/3", and so on.
How do I do this with jquery? How do I detect any url that contains "myblog.tumblr.com/page/" and hide that div? Appreciate any insight.
Not with jQuery per se, but you can just use window.location.pathname.
if (window.location.pathname.indexOf('page') > 0) {
$("#splash").hide();
}
JavaScript has the answer. Then hook the results into some logic with jQuery. More details here.
var pathname = window.location.pathname;