Modify an internal href link for only narrower screens

Modify an internal href link for only narrower screens

nested links html
html link
how to make a button link to another page in html
link inside clickable div
how to create links to sections on the same page in html
html internal link
css-tricks
html button with link

I have an 'overview' html page with lots of product images - each image links to a page that may have 3 or 4 products, eg, src="gadgets-1.html"

On desktop, on the destination page the user can see most products or can easily scroll down if needed.

But on narrow screen where the css MQs convert all columns to 100% width, the last items are not necessarily in view and the user must intuit that it's necessary to swipe down the page, so I want the linking image to link directly to the relevant item on the destination page.

I've established anchor links which work well, eg, src="gadgets-1.html#red-thing" but I don't want the '#red-thing' to be active on wider screens.

To resume, I want the link to be gadgets-1.html on wider screen and gadgets-1.html#red-thing on narrow screen.

I don't see how this can (or should) be done with css. Should js or php be used? If so, how?


A flexible solution would be to use Javascript with a specific data- attribute for storing the different anchor names.

HTML:

<a class="targetLink" href="/link1" data-anchor="anchor-name1">Target link</a>
<a class="targetLink" href="/link2" data-anchor="anchor-name2">Target link</a>

To execute the code cross-browser on DOM ready and window resize, jQuery would be useful. Check CodePen here

$(document).ready(function() {
    var $target = $(".targetLink");
    var $window = $(window);
    var breakpoint = 640;
    var linkSmall = false;

    function checkWidth() {
        if ($window.width() <= breakpoint) {
            // appends anchors to links
            if(!linkSmall){
                $target.each(function(index) {
                   var href2 = $(this).attr("href") + "#" + $(this).attr("data-anchor");
                   $(this).attr("href", href2 );
                });
                linkSmall = true;
            }
        }else{
            // removes anchors to links
            if(linkSmall){
                $target.each(function(index) {
                   var href1 = $(this).attr("href");
                   var a = href1.indexOf('#');
                   var href2 = href1.substring(0, a != -1 ? a : href1.length);
                   $(this).attr("href", href2 );
                });
                linkSmall = false;
            }
        }
    }
    checkWidth(); // on document ready
    $(window).resize(checkWidth); // on window resize
});

html - Modify an internal href link for only narrower screens, A flexible solution would be to use Javascript with a specific data- attribute for storing the different anchor names. HTML: <a class="targetLink"  To change the default browser to another one when opening hyperlink, the following steps may help you: 1. Right-click the Start button in the computer, and choose Control Panel from the context menu, see screenshot: 2. In the Control Panel window, click Programs option,


There are a couple of solutions I can think off of the top of my head. I don't usually like using javascript to modify the DOM based on screenwidth but it is an acceptable solution if you are so inclined.

OR you can do something simple like this:

<div class="links">
    <a class="mobileLink" href="gadgets-1.html#red-thing">gadgets-1</a>
    <a class="desktopLink" href="gadgets-1.html">gadgets-1</a>
</div>

with some css to hide the right link based on screen width

.mobileLink{
    display: none;
}
@media screen and (max-width: 992px) {
    .mobileLink{
        display: inline-block;
    }
    .desktopLink{
        display: none;
    }        
}

Nested Links, this is invalid and won't render as expected --> <a href="#one"> Outside My first inclination would be to simply not nest the links in the markup, but make The larger one could fill up the whole area and the smaller one could sit on top of it. It looks gross to me so I'm just going to assume it's bad news. To add a hyperlink to another slide, simply: Select the Text or an Object on your slide. Open the Insert Hyperlink dialog box (Ctrl + K on your keyboard) Within the dialog box, Select Place in this Document' on the left. Choose the slide you want to hyperlink to. Click OK.


As you don't want to repeat anchor elements(as per the other threads), you won't be able to do it with css so you'll have to use js.

if(window.innerwidth < 911){
document.getElementsByClassName("class")[0].setAttribute("href", "url_for_small_screen_devices);
}else{
document.getElementsByClassName("class")[0].setAttribute("href", "url_for_normal_desktop_and_bigger_devices");
}

you can use a loop to repeat the same process for all anchors with using proper selectors.

A Complete Guide to Links and Buttons, Our complete guide to links, buttons, and button-like inputs in HTML, CSS, and A link without an href attribute is the only practical way to disable a link. Because you're distinguishing between internal and external links or content types. button is down or the element is being tapped on a touch screen). offsetting an html anchor to adjust for fixed header [duplicate] Asked 7 years, 8 months ago. Active 4 months ago. Viewed 529k times. This question already has answers here : Fixed page header overlaps in-page anchors (33 answers) Closed 4 years ago. I am trying to clean up the way my anchors work. I have a header that is fixed to the top of


CSS · Bootstrap, Bootstrap makes use of certain HTML elements and CSS properties that require the use of Set the global link color via @link-color and apply link underlines only on :hover Grid classes apply to devices with screen widths greater than or equal to the In narrower viewports, they will change to the default stacked layout. When the browser window is narrow, the menu in the upper right converts from a regular row of links into a dropdown menu. When you’re on a small screen (iPhone shown here) and click the dropdown, you get an interface to select an option where each option is nice and big and easy to choose.


Getting started · Bootstrap, Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/​bootstrap/3.3.7/css/bootstrap-theme Usually only necessary if you're hacking on Bootstrap itself. Start with this basic HTML template, or modify these examples. Build a more custom page by narrowing the default container and jumbotron. Modify the font settings for your hyperlinks, as desired. Click on OK to close the Font dialog box. The Modify Style dialog box is still visible. Make sure the New Documents Based On this Template radio button is selected, at the bottom of the Modify Style dialog box. Click on OK. Close the Styles task pane.


Style Sheets in HTML documents, Authors may link this style sheet to their source HTML document with the LINK element: A style sheet intended for screen use may be applicable when printing, but is Some style sheet implementations may allow a wider variety of rules in the should only apply to H1 elements of a specific class, we modify it as follows: You can show, hide, and change the layout and content of data screens for each activity. Hold UP. Select Settings > Apps. Select the activity to customize. Select Data Screens. Select a data screen to customize. Select an option: Select Status to turn the data screen on or off.