Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jan 2019
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Anchor link in link not working

    When I put an anchor link in my link to a 2nd page, it basically renders the link useless. It's a work in progress, but you can see it here (lots of links don't work so just click on the stuff below):

    On this page (d a n a N E I B E R T), if you click on "Life", it should scroll down to the anchor link and show my test photos. Now scroll back up. If you click on "Aldar Water's Edge", instead of going to the link for Aldar (d a n a N E I B E R T), it just scrolls back down to the anchor link on the current page. What am I doing wrong and how do I fix this?

    To troubleshoot, I converted the page back to HTML but the results were the same—I thought maybe PHP didn't support an external anchor link. The only way to make it behave somewhat normally is to remove the anchor link from the Aldar link but that is no good.

  2. #2
    Regular Coder
    Join Date
    Oct 2015
    Posts
    421
    Thanks
    1
    Thanked 52 Times in 49 Posts
    When you put a hash in an anchor link, it scrolls to an element with that id; this is deliberate.

    your link:
    PHP Code:
    /dnp/photographs-aldar.php#start 
    But that's the least of your worries looking at you site???

    It takes too long to load
    Are you genuinely expecting people to read the text? I like a large font size but that is too large or have you been reading some 90s seo tactics of just putting keywords on the page and hoping to scroll past them so that no one will read it?
    Is it designed for mobile phones only?

  3. #3
    Administrator VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    11,215
    Thanks
    6
    Thanked 1,347 Times in 1,316 Posts
    The problem is not PHP, it’s this JavaScript:

    Code:
    <!-- Smooth scroll section links
        ================================================== -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                // Add smooth scrolling to all links
                $("a").on('click', function(event) {
    
                    // Make sure this.hash has a value before overriding default behavior
                    if (this.hash !== "") {
                        // Prevent default anchor click behavior
                        event.preventDefault();
    
                        // Store hash
                        var hash = this.hash;
    
                        // Using jQuery's animate() method to add smooth page scroll
                        // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
                        $('html, body').animate({
                            scrollTop: $(hash).offset().top
                        }, 800, function(){
       
                            // Add hash (#) to URL when done scrolling (default click behavior)
                            window.location.hash = hash;
                        });
                    } // End if
                });
            });
        </script>
    and specifically the fact that it only checks for a fragment identifier (a.k.a. “hash string”) in paths/URLs, regardless of the rest of the path/URL. All your links link to different files/pages but all of them also have the fragment identifier “#start”, so the script discards everything except that “start” anchor and assumes it’s on the same page.

    You need to test whether the URL/path in the link is the same as the current URL (window.location) and then only let the script prevent reloading if that’s the case, otherwise just load the new page. Perhaps the article at CSS Tricks helps with this for a better smooth scrolling solution.

    And by the way: you also have HTML errors:
    Code:
    <span class="simple-item"><a href="photographs-lifestyle.php#start">Lifestyle <span class="simple-slash"> / </span>
        <span class="simple-item"><a href="photographs-landscapes.php#start">Landscapes <span class="simple-slash"> / </span>
        <span class="simple-item"><a href="photographs-health.php#start">Health <span class="simple-slash"> / </span>
        <span class="simple-item"><a href="photographs-transportation.php#start">Transportation</a>
    You forgot to close the anchor and span elements.

  4. Users who have thanked VIPStephan for this post:

    figure1a (Jan 10th, 2019)

  5. #4
    New to the CF scene
    Join Date
    Jan 2019
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you sir! Fixed! (I think for now). But I'll also check out your link for that might be a better solution in the long term. And thanks for pointing out the other errors.

  6. #5
    New to the CF scene
    Join Date
    Jan 2019
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by wha View Post
    When you put a hash in an anchor link, it scrolls to an element with that id; this is deliberate.

    your link:
    PHP Code:
    /dnp/photographs-aldar.php#start 
    But that's the least of your worries looking at you site???

    It takes too long to load
    Are you genuinely expecting people to read the text? I like a large font size but that is too large or have you been reading some 90s seo tactics of just putting keywords on the page and hoping to scroll past them so that no one will read it?
    Is it designed for mobile phones only?
    Thanks for the response. I don't think I explained it clearly enough but VIPStephan showed me what was wrong so it's fixed now.

    As far as loading, the industry that I am in is all high speed connections. It's generally accepted to have a content rich site with each page weighing in MBs and not KBs. My current site (d a n a N E I B E R T) is probably too large for regular people to use but that and this new site load in seconds even here at my house. So, I'm not worried about the size.

    Ha ha on the font. It's just a design choice not an SEO lame hack. Actually, no one that hires me would ever find me by doing a generic search so anything SEO related is moot to me.

  7. #6
    Banned
    Join Date
    Jan 2019
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi, if want to create a single page website then you can go through th creating id's to scroll up & down. Now at present, you always calling the pages to start at the top.
    Last edited by vinyl-junkie; Jan 10th, 2019 at 06:47 PM. Reason: self-promotional link removed

  8. #7
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    3,273
    Thanks
    4
    Thanked 476 Times in 464 Posts
    Quote Originally Posted by figure1a View Post
    As far as loading, the industry that I am in is all high speed connections.
    No offense, but that's generally classified as a 'lame excuse' in the industry. This is the Internet, the only thing you can be certain of who will visit a website is you cannot be certain about who will visit a website.

    To that end, the page looks like it was designed for 4k display users (probably on a Mac where resolution scaling is a serious "what's that then?") and "to blazes with everyone else".

    Quote Originally Posted by figure1a View Post
    It's generally accepted to have a content rich site with each page weighing in MBs and not KBs.
    What content? On the web text is the first class citizen, everything else may as well have leprosy. You have none. Well, you have 775 bytes and 98% of that are your links. You have nothing -- not even alt text -- to explain what the images are or why anyone should care. That's user experience 101.

    Quote Originally Posted by figure1a View Post
    Ha ha on the font. It's just a design choice not an SEO lame hack. Actually, no one that hires me would ever find me by doing a generic search so anything SEO related is moot to me.
    The thing is the SEO hack-ness notion @wha suspected is supported by the markup, since you've got nearly everything stuffed into numbered headings. This is likely because you chose your tags for appearance and not meaning, which is for all intents and purposes nothing more than flipping the bird at usability and accessibility.

    It feels built on the incorrect notion that "art is design" -- when actual design is engineering that incorporates art, usability, accessibility, and standards. Of those four things, what you have is pretty much devoid of everything but the first.

    HTML tags have meanings, separate from their default appearance, for example an H1 (If you aren't using HTML 5's pointlessly redundant SECTION tag) is the (singular) heading (singular) that everything on every page of your site is a subsection of. An H2 is a heading that marks the start of a major subsection of the page with the first H2 (or HR) marking the start of your main content. An H3 marks the start of a subsection of the H2 preceding it. H4 means the start of a subsection of the H3 preceding it, and so forth down to H6. Even HR means "a change in topic or section where heading text is unwanted or unwarranted". They do not mean fonts in different weights and sizes or drawing a line across the screen!

    Hence this:
    Code:
    		<div class="section padding-bottom-big over-hide z-bigger">
    			<div class="container">
    				<div class="row px-5 px-xl-2 justify-content-center">
    					<div class="simple">
    			
    			<h1>
    	<span class="simple-sub">Portfolios </span>
    	
    	<span class="simple-item"><a href="photographs.php#start">Life</a></span><span class="simple-slash"> / </span>
    	<span class="simple-item"><a href="photographs-lifestyle.php#start">Lifestyle </a></span><span class="simple-slash"> / </span>
    	<span class="simple-item"><a href="photographs-landscapes.php#start">Landscapes </a></span><span class="simple-slash"> / </span>
    	<span class="simple-item"><a href="photographs-health.php#start">Health </a></span><span class="simple-slash"> / </span>
    	<span class="simple-item"><a href="photographs-transportation.php#start">Transportation</a></span>
    	
    	<span class="simple-sub">Commissions</span>
    	<span class="simple-item"><a href="http://www.dananeibert.com/dnp/photographs-aldar.php#start">Aldar Water’s Edge</a></span><span class="simple-slash"> / </span>
    	<span class="simple-item"><a href="photographs-american-express.php#start">American Express</a></span><span class="simple-slash"> / </span>
    	<span class="simple-item"><a href="photographs-ascent-protein.php#start">Ascent Protein</a></span><span class="simple-slash"> / </span>
    	<span class="simple-item"><a href="photographs-avyachts.php#start">AvYachts</a></span><span class="simple-slash"> / </span>
    	<span class="simple-item"><a href="photographs-chevy-colorado.php#start">Chevy Colorado</a></span><span class="simple-slash"> / </span>
    	<span class="simple-item"><a href="photographs-chevy-silverado.php#start">Chevy Silverado</a></span><span class="simple-slash"> / </span>
    	<span class="simple-item"><a href="photographs-chevy-traverse.php#start">Chevy Traverse</a></span><span class="simple-slash"> / </span>
    	<span class="simple-item"><a href="photographs-dodge-challenger.php#start">Dodge Challenger</a></span><span class="simple-slash"> / </span>
    Is pretty much gibberish. On top of all the "DIV for nothing" and "classes for nothing" that bootcrap has saddled you with -- (You want to learn how NOT to build a website? Use bootcrap!) -- well... SPAN and Anchor are semantically neutral applying no meaning, so what you' basically wrote is a run-on sentence that reads "Portfolios Life / Landscapes / Health" -- which is incomprehensible to any user not on the perfecty mix of screen size and user-agent.

    You wanted that text bigger, do it in the stylesheet. That's not H1's job. Likewise that "portfolios" text seems to be the heading for that section, so it should be a H2. You seem to have a menu, menus are lists of choices, hence the correct markup would be UL/LI. you don't like the default appearance of those tags, change it in the CSS. That's what CSS is for.

    If that were written according to the proper HTML norms, it would go something more like this:

    Code:
    <div id="categories">
    	<h2>Portfolios</h2>
    	<ul>
    		<li><a href="photographs.php#start">Life</a><</li>
    		<li><a href="photographs-lifestyle.php#start">Lifestyle </a><</li>
    		<li><a href="photographs-landscapes.php#start">Landscapes </a><</li>
    		<li><a href="photographs-health.php#start">Health </a><</li>
    		<li><a href="photographs-transportation.php#start">Transportation</a></li>
    	</ul>
    	<h2>Commissions</h2>
    	<ul>
    		<li><a href="http://www.dananeibert.com/dnp/photographs-aldar.php#start">Aldar Water’s Edge</a></li>
    		<li><a href="photographs-american-express.php#start">American Express</a></li>
    		<li><a href="photographs-ascent-protein.php#start">Ascent Protein</a></li>
    		<li><a href="photographs-avyachts.php#start">AvYachts</a></li>
    		<li><a href="photographs-chevy-colorado.php#start">Chevy Colorado</a></li>
    		<li><a href="photographs-chevy-silverado.php#start">Chevy Silverado</a></li>
    		<li><a href="photographs-chevy-traverse.php#start">Chevy Traverse</a></li>
    		<li><a href="photographs-dodge-challenger.php#start">Dodge Challenger</a></li>
    Because structurally and semantically, that's what things ARE. Everything else you did belongs on the stylesheet, and you didn't do anything to warrant any extra div or extra classes/id's inside it. Even those dividing slashes in modern practice would be added in the stylesheet so you only have to say it once (well, twice), not every single time.

    Or how about this:

    Code:
    <a data-scroll-reveal="enter bottom move 30px over 0.5s after 0.2s" class="simple-back-to-top scroll-to-top2"><h4>View another portfolio</a>
    You never closed the H4, you've got the bad practice of a anchor wrapping a block level element, and just what exactly makes that the start of a subsection of the (nonexistent) H3 preceding it?

    Likewise you're using JavaScript for a lot of things we haven't needed JavaScript for in over a decade, and for things that in general do more to hamper usability than to help it -- like the artsy, confusing, animated cursor follower that -- as @wah rightly noted -- feels like something people did in the late '90's that was killed off alongside tables for layout, animated GIF's, and marquees.

    Even simple things like your keywords meta is banjaxed, guaranteed to get you ignored and -- as noted by @wah -- reeking badly of early 2000's SEO trickery and not legitimate use of the tag. It's supposed to be seven or eight words that exist inside your BODY tag you want a slight uprank on. It's not called "keyphrases" or "keysentences", it's keyWORDS. It's not a place to blindly stuff dozens of phrases that aren't even relevant to the page. Seven or eight single words or proper names, preferably under 128 characters in length. (some will even say 96 or less!)

    Which is how you ended up writing 13.3k of HTML for 775 bytes of plaintext, around four dozen anchors, and eight content images -- around 6k or less' job. No joke, it's more than twice the HTML such a simple page needs. Again, gotta loathe bootstrap, its blatant lies, and the active promotion of ignorance by its creators, maintainers, and fanboys.

    I were writing that same page -- retaining the accessibility/usability/ux failures -- the markup would be more like this:

    Code:
    <!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
    <meta
    	name="viewport"
    	content="width=device-width,height=device-height,initial-scale=1"
    >
    <meta
    	name="description"
    	content="Dana Neibert is an award winning photographer noted for his environmental portraits, lifestyle and landscape photography."
    >
    <meta
    	name="keywords"
    	content="life,health,transportation,insurance,hotel,theater,cruises"
    >
    <meta name="theme-color" content="#212121">
    <meta name="msapplication-navbutton-color" content="#212121">
    <meta name="apple-mobile-web-app-status-bar-style" content="#212121">
    <link
    	rel="stylesheet"
    	href="template/screen.css"
    	media="screen,projection,tv"
    >
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="apple-touch-icon" href="apple-touch-icon.png">
    <title>d a n a N E I B E R T</title>
    </head><body>
    
    <div id="top">
    	<h1><a href="/">Dana<span>NEIBERT</span></a>>/h1>
    	<a href="http://www.instagram.com/dananeibert" class="instagram">
    		Instagram
    	</a>
    	<input type="checkbox" id="toggle_menu" class="toggle">
    	<label for="toggle_menu"></label>
    	<ul id="menu">
    		<li class="current"><a href="photographs.php">photographs</a></li>
    		<li><a href="motion.html">motion picture</a></li>
    		<li><a href="https://www.saatchiart.com/account/artworks/968744">prints</a></li>
    		<li><a href="bts.html">bts</a></li>
    		<li><a href="http://www.instagram.com/dananeibert">instagram</a></li>
    		<li><a href="../stock">stock</a></li>
    		<li><a href="about.html">about</a></li>
    		<li><a href="contact.html">contact</a></li>
    		<li><a href="index.html">reboot</a></li>
    	</ul>
    <!-- #top --></div>
    
    <div id="siteIndex">
    
    	<h2>Portfolios</h2>
    	<ul>
    		<li><a href="photographs.php#start">Life</a></li>
    		<li><a href="photographs-lifestyle.php#start">Lifestyle </a></li>
    		<li><a href="photographs-landscapes.php#start">Landscapes </a></li>
    		<li><a href="photographs-health.php#start">Health </a></li>
    		<li><a href="photographs-transportation.php#start">Transportation</a></li>
    	</ul>
    	
    	<h2>Commissions</h2>
    	<ul>
    		<li><a href="http://www.dananeibert.com/dnp/photographs-aldar.php#start">Aldar Water’s Edge</a></li>
    		<li><a href="photographs-american-express.php#start">American Express</a></li>
    		<li><a href="photographs-ascent-protein.php#start">Ascent Protein</a></li>
    		<li><a href="photographs-avyachts.php#start">AvYachts</a></li>
    		<li><a href="photographs-chevy-colorado.php#start">Chevy Colorado</a></li>
    		<li><a href="photographs-chevy-silverado.php#start">Chevy Silverado</a></li>
    		<li><a href="photographs-chevy-traverse.php#start">Chevy Traverse</a></li>
    		<li><a href="photographs-dodge-challenger.php#start">Dodge Challenger</a></li>
    		<li><a href="photographs-emerald.php#start">The Emerald</a></li>
    		<li><a href="photographs-farmers-insurance.php#start">Farmers Insurance</a></li>
    		<li><a href="photographs-four-seasons.php#start">Four Seasons</a></li>
    		<li><a href="photographs-four-seasons-bora-bora.php#start">Four Seasons Bora Bora</a></li>
    		<li><a href="photographs-four-seasons-lanai.php#start">Four Seasons Lanai</a></li>
    		<li><a href="photographs-hertz.php#start">Hertz Underground Theater</a></li>
    		<li><a href="photographs-homewood-suites.php#start">Homewood Suites</a></li>
    		<li><a href="photographs-ihg.php#start">International Hotel Group</a></li>
    		<li><a href="photographs-jaguar.php#start">Jaguar F-TYPE</a></li>
    		<li><a href="photographs-kawasaki.php#start">Kawasaki Mule</a></li>
    		<li><a href="photographs-kohler.php#start">Kohler</a></li>
    		<li><a href="photographs-moon-palace.php#start">Moon Palace Resort</a></li>
    		<li><a href="photographs-mfs.php#start">MFS Investment</a></li>
    		<li><a href="photographs-onstar.php#start">OnStar</a></li>
    		<li><a href="photographs-princess.php#start">Princess Cruises</a></li>
    		<li><a href="photographs-progressive.php#start">Progressive Insurance</a></li>
    		<li><a href="photographs-ram.php#start">Ram Trucks</a></li>
    		<li><a href="photographs-range-rover.php#start">Range Rover</a></li>
    		<li><a href="photographs-silversea.php#start">Silversea</a></li>
    		<li><a href="photographs-subaru.php#start">Subaru</a></li>
    		<li><a href="photographs-sutter.php#start">Sutter Health</a></li>
    		<li><a href="photographs-tdameritrade.php#start">TD Ameritrade</a></li>
    		<li><a href="photographs-union-bank.php#start">Union Bank</a></li>
    		<li><a href="photographs-united-way.php#start">United Way</a></li>
    		<li><a href="photographs-usta.php#start">United States Tennis Association</a></li>
    		<li><a href="photographs-wounded-warrior.php#start">Wounded Warrior Project</a></li>
    	</ul>
    	
    <!-- #siteIndex --></div>
    	
    <div id="portfolioExample">
    
    	<h2>Aldar Water’s Edge</h2>
    	
    	<img src="img/portfolio/aldar1.jpg" alt="Describe this, alt is not optional!">
    	<img src="img/portfolio/aldar2.jpg" alt="Describe this, alt is not optional!">
    	<img src="img/portfolio/aldar3.jpg" alt="Describe this, alt is not optional!">
    	<img src="img/portfolio/aldar4.jpg" alt="Describe this, alt is not optional!">
    	<img src="img/portfolio/aldar5.jpg" alt="Describe this, alt is not optional!">
    	<img src="img/portfolio/aldar6.jpg" alt="Describe this, alt is not optional!">
    	<img src="img/portfolio/aldar7.jpg" alt="Describe this, alt is not optional!">
    	<img src="img/portfolio/aldar8.jpg" alt="Describe this, alt is not optional!">
    	
    	<div class="video">
    		<iframe
    			src="https://player.vimeo.com/video/310670993"
    			webkitallowfullscreen
    			mozallowfullscreen
    			allowfullscreen
    		></iframe>
    	<!-- .video --></div>
    	
    	<div class="video">
    		<iframe
    			src="https://player.vimeo.com/video/310671265"
    			webkitallowfullscreen
    			mozallowfullscreen
    			allowfullscreen
    		></iframe>
    	<!-- .video --></div>
    	
    	<a href="#siteIndex" class="viewAnother">View another portfolio</a>
    	
    <!-- #portfolioExample --></div>
    
    <div id="footer">
    	<hr>
    	&copy; Dana Neibert<br>
    <!-- #footer --></div>
    
    <script src="scripts/library.js"></script>
    
    </body></html>
    ... and 90%+ of the stuff you're doing with JavaScript I'd either be implementing with CSS (like the menu show/hide as a fullscreen modal), using far less code to do (the smooth scroll which on-page should be auto-hooking from the script), or ripping out entirely as a waste of bandwidth that only impresses five year olds. (the cursor thing).

    And in the process killing off that weird loading animation nonsense, the lazy loading of images, etc, etc which do nothing but make the page slower and harder to use... much less maintain.

    It's very much what I expect when people get suckered by the outright lies of bootstrap and its kin/kine. That's not on you, that's on them.
    Last edited by deathshadow; Jan 12th, 2019 at 03:52 AM.
    “There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies and the other way is to make it so complicated that there are no obvious deficiencies.” – C.A.R. Hoare, The 1980 ACM Turing Award Lecture
    http://www.cutcodedown.com


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •