I'm trying to set up an anchor link for my site to jump to a particular heading on the same page. Below is my current code, but when you select the link nothing happens. Any help would be great, thanks!
Section I want the link to jump to
<div class="heading1">
<h2 style="margin-bottom:-5px;font-size:40px;"><a id="#work"></a>content</h2>
<p style="font-size: 26px;">content</p>
</div>
Link
<div class="contact mobile">
<a href=“#work”>Work</a>
</div>
need to refer the href to the id of the div you want to jump to href="#jump"
<div class="heading1" id="jump">
<h2 style="margin-bottom:-5px;font-size:40px;">content</h2>
<p style="font-size: 26px;">content</p>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="contact mobile">
Work
</div>
brother remove hash from attribute id="#work" use just id="work">
Related
I am posting the code. In the line <div class='qrcode-value'></div> it will scan the qr code and I want to make it as link so that it will redirect to the other website once clicking on it. Instead of copy and paste.
<div id="content-overlay" style='display: none'>
<div class='qrcode-value'>
</div>
</div>
<a href="http://google.com">
<div class='qrcode-value'>
anything
</div>
</a>
fiddle https://jsfiddle.net/athulmathew/r73pn4w8/2/
You can use JavaScript to do this.
<div id="content-overlay" style='display: none'>
<div class='qrcode-value' onclick="location.href = 'https://stackoverflow.com/questions/56946816/link-to-same-page-using-div-class';">
</div>
</div>
Read more about onclick event here.
I'm creating a hybrid app for iOS and Android and I'm using framework7 to create it. The thing is I have a media list view that onclick should redirect to a page.html, and it doesn't. I've triple-checked every-name to see if it was a capital letter thing but every name was written correctly. This is the media list view code:
<li>
<a href="Page.html" class="item-link item-content">
<div class="item-media"><img src="abc.png" width="44"></div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">Hey!</div>
</div>
<div class="item-subtitle">Hi</div>
</div>
</a>
</li>
Does someone know what might be the problem?
Framework7 uses ajax pages by default, so your target page should be formatted for this, or you can add the class name external to the href tag to open directly.
<li>
<a href="Page.html" class="item-link item-content external">
<div class="item-media"><img src="abc.png" width="44"></div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">Hey!</div>
</div>
<div class="item-subtitle">Hi</div>
</div>
</a>
</li>
Check the documentation note: http://framework7.io/docs/pages-ajax.html
I have wracked my brain and can not find the reason this is happening. I have some links in one div that are mailto which work fine. But P tags and an image in a div in the next column seem to be inheriting the mailto.
I am using bootstrap. Has anyone come across this before? Can anyone see something I am missing?
Top of container with affected code:
<div class="row rowSettings col-sm-12">
<div class="col-sm-3 text-left sidepanel">
Some divs, then this div with the mailto links:
<li class="leftSubNavLinks"><a class="sublinks" href="mailto:email#domain.com?subject=message subject&body=prepopulated message" target="_blank"Contact</li>
and the following div that is inheriting the mailto:
<div class="col-sm-9 text-left">
<div class="col-sm-8 titleContainer">
<img src="url/image.svg" alt="">
</div>
<div class="col-sm-4 titleContainer">
<h1 class="mainTitle"> Title text</h1>
</div>
</div>
<div class="col-sm-9 clearfix">
<p class="bodyCopy" id="body-text">some text here</p>
</div>
You haven't closed your <a>
<li class="leftSubNavLinks">
<a class="sublinks" href="mailto:email#domain.com?subject=message subject&body=prepopulated message" target="_blank">Contact</a>
</li>
You aren't closing your <a> tag
<li class="leftSubNavLinks">
<a class="sublinks" href="mailto:email#domain.com?subject=message subject&body=prepopulated message" target="_blank"Contact
</li>
Should be:
<li class="leftSubNavLinks">
<a class="sublinks" href="mailto:email#domain.com?subject=message subject&body=prepopulated message" target="_blank">Contact</a>
</li>
The browser will try to "fix" your broken code by closing the tag where it thinks it should be closed. This is almost certainly not where it should be closed which is why your following HTML is being bundled up into the <a>.
I've a problem with anchor tags :/
I've got the following code:
<div name="divA">
<a name="A"> A</a>
</div>
<div name="divB" style="display: none;">
<a name="B"> B</a>
</div>
<div name="divHrefB">
B
</div>
My goal is that when i click on B (divHrefB) the application go to "divB" but since this element hidden it doesn't work.
Please note, that i don't want to show divB (i want a link to the place where div are... is that possible?
At this point, i'm thinking on generate dynamically the href value (in this case, i would generate the following div)
<div name="divHrefB">
B
</div>
Thanks a lot.
just don't apply display: none, just add this css for the hidden div.
<div name="divHrefB" style="height: 0px;width: 0px;overflow:hidden;">
B
</div>
You're missing the ending closing " comment.
try this guy:
style="display: none;"
you are missing " in style end
<div name="divA">
<a name="A"> A</a>
</div>
<div name="divB" style="display: none;">
<a name="B"> B</a>
</div>
<div name="divHrefB">
B
</div>
I'm having problem with IE 6 (what a surprise : D)
On this site, in the content, I cannot click on the first few links. But after a few items, the links are working fine.
This problem appears if I load a page with ajax from the menu.
I couldn't figure out the problem, has anybody seen something like this before?
The HTML code is:
<div id="cont" style="display: block;">
<div class="localHeader">
<span> Szállás > Magánszállás </span>
</div>
<div class="subList">
<div class="productContainer">
<div class="img">
<img style="width: 200px;" src="/up/21/480_98_szarka2_255.jpg">
</div>
<div class="text">
<div class="productName">
<a title="Szarka család" href="/cats/showItem/21" rel="history"> Szarka család </a>
</div>
<div class="productDatas">
kato55#freemail.hu
<br>
<a title="Szarka család" href=""></a>
<br>
+36 84 314 062
</div>
<div class="productText"></div>
<a title="Szarka család" href="/cats/showItem/21" rel="history" class="moreButton"> Részletek </a>
</div>
</div>
</div>
</div>
Of course the .productContainer is repeating in the .subList.
Thanks.
Make sure that you have explicitly set overflow:auto on .productContainer. If that doesn't work, try Googling "clearfix" and see if that doesn't fix your problem.
You should ensure that your HTML validates against the DocType you're using, at the moment it doesn't and this can effect how browsers render parts of the page.
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fbalatonnet.com%2Fcats%2FlstSubCat%2F13