I am trying to link some text with the href tag to a specific section in my website.
On the homepage I have a quote and then the person's name of who said it. I want to link his name to the "Upcoming Events" tab on my "About" section.
The website is http://www.verticalministries.net. The name "Aaron Ivey" needs to be linked to the "Upcoming Events" tab under the "About" section. The website is a one-page portfolio that scrolls using JavaScript.
I have tried using the name attribute, but that wasn't working because the href tag would look like <a href="#about#ivey>Aaron Ivey</a> and that just isn't valid code, because I have the page scrolling via classes. I did check the name attribute and I did give it #ivey.
<div class="fifth_page" style="display:none">
<h1>Upcoming Events</h1>
<h4>Feb. 15 - Aaron Ivey Band</h4>
<a name="#ivey"></a>
<img src="images/iveypromo.jpg" alt="Aaron Mug Shot" class="floatRight img_left_space" />
<p> “Aaron Ivey believes that all worship is a response to a creative and compelling God. Serving as one of the worship pastors at The Austin Stone...</p>
</div>
Any help would be greatly appreciated.
If you have any further questions, please let me know.
Thank you.
Sincerely,
DHJolesch
don't use attribute name it's deprecated, rather use id
example code, how to jump with an anchor to a div with specified id:
Jump to ID
<div id="your-page-element">
will jump here
</div>
Also for scrolling animations with jQuery look at How can I scroll to a specific location on the page using jquery?
Related
I'm new to Wordpress and PHP and this might be a dumb question, but I'm trying to link one of my menu items to one of the sections on my index page.
I know that if I just wanted to link it to the index I should use this:
<?php echo home_url(); ?>
But I want the link to send the user to the "About" section. Basically, I need to know how to do this:
index.php#about
but with PHP.
Thank you!
You're on the right track.
The ideal way to do this would be to add a <a name="about></a> tag to the appropriate section of your template. This is called an HTML anchor and is how those #tags know where to point to.
Given that this is Wordpress, you could probably also get away with just appending that to the title of the appropriate section. So wherever you specified 'call this section "About"', you could probably redo it as 'call this section "<a name="about">About</a>"' and then you'll be able to link to it using anchors like in your example-- About
If you are new to php, maybe you should use wordpress's editor ?
In your page (in the admin page), you can put any html you want.
In the editor, you can add custom links (with anchors or not) and you can put a div tag in the "html" tab.
So if you put your link at the top of your page and put your section in a div id="myanchor", it should do it !
You shouldn't do this with HTML or PHP but rather with JS. Specifically for long pages and require in-page navigation, I really like the scrollTo jQuery plugin.
In practice, you'll have some HTML containers that look something like this:
<!-- Your menu -->
<ul>
<li id="about-button"></li>
<li id="product-button"></li>
<li id="something-button"></li>
<li id="else-button"></li>
</ul>
<!--Your page sections-->
<main class="my-page">
<section id="about"></section>
<section id="product"></section>
<section id="something"></section>
<section id="else"></section>
</main>
Once you've included jQuery and the scrollTo plugin, you'll have some JS that looks like this:
$('#about-button').click(function() {
$.scrollTo($('#about'), {
duration: 800,
offset: -50
});
return false;
});
The JS is saying that once you click on the #about-button, take 800 milliseconds and animate the page down to -50px before the position of the #about HTML element. You could just setup a series of click functions for each button and you'd have a slick in-page nav system.
I have referred to the solution given in this answer but failed to make it work. I have an index.php page which says:
<a href="page.php#anchor-name">
However, this link always direct to page.php and not to #anchor-name div on that page.
Is this so because I'm trying on localhost? Whats the problem that this works on HTML but not php? Whats the solution to make this work on php?
The relevant section of the code:
<a class="metro-box blue-gradient normal" href="Services.php#Ecommerce">
<div class="metro-box-icon"><i class="icon-user"></i></div>
<div class="metro-box-title"><h5>Cloud Utilities</h5></div>
</a>
I want the hyperlink to land on this div on Services.php:
<div class="three-fourth last-in-row" id="#ECommerce">
You are dealing with named anchors.
In this, you can give link to a particular section in the page.
E.g.
Say, I have following divs.
<div id="first">Bla Bla</div>
And this div is far below header, you can give a link to it using hash.
Go to First
By clicking on the link, your respective div will get focused.
I'm working on a scrollable one-page website, in which each div represents a different section. For example, url is dynaone.com/index.php, and when I click on the menu's different buttons, it changes to /index.php#s1, #s2, #s3, and so on. In section nº 2 I added another menu that works with php GET, in a way that when you click on one of the buttons, it redirects you to index.php?id=1 and so on. Of course when I first tried it, it scrolled me back to the top of the page, 'home', as I wasn't specifying the section. But when I did, assigning "index.php?id=1#s2" to the first element in the inner menu, it redirected me to section 1. It doesn't matter which number I write after "#s", it will keep putting section nº 1 on top of the page.
I'm using SMINT's demo as a base, adjusting it to my website's needs, but I couldn't find anything related to GET method issues on the plugin's page.
I would really appreciate some help with this, as it's very annoying having to go back everytime I click to correctly view section nº 2.
This is part of my inner menu:
<div id="botonera_productos"><ul>
<li> Quemadores </li>
<li> BCAAs</li> </ul> </div>
This is my php section:
if(#$_GET['id']==1) {
?>
<figure><img src="imagenes/quemadores/1.jpg"><figcaption> ULTIMATE L-CARNITINA 500 60 TABS - <b>$330</b> </figcaption></figure>
<?php } ?>
And this is the site's main menu:
<nav class="subMenu" >
<div class="inner">
Home
Nosotros
Productos
Local
Envíos
Consultas
Facebook
</div>
</nav>
Thank you.
The question isn't very clear but basically:
The anchor is an HTML construct. So once the page is already loaded, you can use #whatever to take you to wherever on that page that the anchor has been defined; ala <a id="whatever">
The PHP arguments, like ?id=1 - a new page will be loaded depending on what you use here.
You can use anchors in conjunction with a PHP page (ie. a PHP page may have multiple anchors) but you cannot load a new page with anchors alone.
Maybe Javascript will help you achieve what you want to do. With AJAX calls and the like then there are far less restrictions on how you load data.
<base href="http://www.w3schools.com/" target="_blank">
How can i add the above base URL for the particular div section using php like
If i have two div section
This section links will work with above base URl link
<div>
help
</div>
This section links will work with websites URl link
<div>
help
</div>
I'm trying "simple html dom" to fetch some content from some other website paste it under one div section that has relative links. That can be converted to direct link like "/images/image.png" to "www.example.com/images/image.png"
<div class='normalUrl'>
Help
</div>
<div class='otherBaseUrl'>
Help
</div>
This is a hardcoded way just to show how the end result can be achieved. I'm sure you want to make this more generic to fit your goal.
There is no way to do this directly with html. You can do it with some server side languages like PHP like following.
abc
abc
or
You can also do it with javascript ( client side )
At the top of this page there's a <p> element that contains a button for Twitter, Facebook, and Stumbleupon. The code that produces these buttons is:
<p align="right"><kamran></p>
When I run the same app on a local Apache server, these buttons are not produced, I just get
<p align="right"><kamran></p>
Can someone explain what this <kamran> tag is and why it doesn't get converted to a series of buttons when I run the app locally?
The page in question is generated using Pixelpost, a photo-blogging platform written in PHP.
Kamran is a pixelpost add-on. The code in the page activates the kamran.php file, which inserts the "share" links.
This is what I see in the relevant paragraph when I click 'View Source' in my browser:
<p align="right"><a target='_blank' href='http://www.facebook.com/share.php?u=http%3A%2F%2Fwww.blork.org%2Fstreetscene%2Findex.php%3Fshowimage%3D12&t=Street+Scene+by+Blork-Street+Scenes+from+Montreal+and+Beyond%3A+Hommage+%C3%A0+F%C3%A9lix+%282%29'><img src='http://www.kamran.ir/icon/icon-facebook.png' alt='facebook icon' title='Facebook'/></a> <a target='_blank' href='http://twitter.com/home?status=Street+Scene+by+Blork-Street+Scenes+from+Montreal+and+Beyond%3A+Hommage+%C3%A0+F%C3%A9lix+%282%29 http%3A%2F%2Fwww.blork.org%2Fstreetscene%2Findex.php%3Fshowimage%3D12'><img src='http://www.kamran.ir/icon/icon-twitter.png' alt='twitter icon' title='Twitter' /></a> <a target='_blank' href='http://www.stumbleupon.com/refer.php?url=http%3A%2F%2Fwww.blork.org%2Fstreetscene%2Findex.php%3Fshowimage%3D12'><img src='http://www.kamran.ir/icon/icon-stumbleUpon.png' alt='stumbleUpon icon' title='stumbleUpon' /></a> </p>
You can see the URLs of the button icons in there. (They are from an Iranian site, www.kamran.ir.) I am not an html expert; I thought at first that kamran must be a macro defined in templates/egocentric/styles/egocentric.css, but it's not. Is it possible that the site has changed since you last looked at it?