I am trying to get the whole div clickable and this works but only with a straight link to another site. Is there a way to make it work with this text in it also:
<div class='reddit' title='Share Us On Reddit' onclick="window.open('http://www.reddit.com/submit?url=httpsFwww.example.com&title=XXX is Cape Breton's Homepage. Start Your Web Search With Beautiful Cape Breton Island')">
Thanks
From CSS Tricks
This probably isn't a thing you need to rely on JavaScript for
anymore. Since HTML5, this is perfectly valid:
<a href="http://example.com">
<div>
anything
</div>
</a>
And remember you can make links display: block; so sometimes you
don't even need the div.
<div style="cursor:pointer" onclick="document.location='evenidontknow-page.html'">
<h2>Full Div Clickable</h2>
</div
The above code helped me very well, and this will not require any extra code.
Using a tag may solve the problem but we need to add extra code to it.
please check this link for more info w3schools
Bootstrap has a feature called "Stretched Link". From the documentation:
Make any HTML element or Bootstrap component clickable by “stretching” a nested link via CSS.
You can read more by visiting the following link:
https://getbootstrap.com/docs/4.4/utilities/stretched-link/
Related
I am trying to make the logo to redirect to the homepage, but when I put the image in an anchor its responsiveness doesn't work. I am using the "Simple Blog" template from here https://www.ampstart.com/templates
<a href="/">
<amp-img src="/images/logo/logo.svg" width="435" height="61.3" layout="fixed" class="my0 mx-auto " alt="Logo"></amp-img>
</a>
Try changing the layout type of amp-img from fixed to responsive.
I seem to recall possibly having some issues with SVG and responsive, but I could be thinking of something else. If responsive doesn't work try intrinsic.
See the tips and tricks section of the amp-img page for more info.
Is there a way to make input text inside a link tag works well in IE8? I cannot place the caret inside nor select the text within it.
<input type="text">
I think the reason why I'm trying to do this is not important here, just consider I have no choice of make it work under an <a> tag. I only have control over what's inside the <a> tag.
As a solution, I was thinking about some JQuery DOM manipulation when in IE8 mode but there must be a easier/cleaner way of fixing this "bug".
Thanks
I think this is due to the input and link tag display properties, while an input is display:inline-block; your link is display:inline;. Try to play with these properties and z-index if it's not working.
Hovever, i think jQuery solution is better, and simpler, except if this is your only usage of jQuery on your page.
HTML :
<input type="text" />
jQuery script
jQuery(document).ready(function(){
$("#myInputLink").click(function(){
// .trigger('focus') or .focus(), but the first one is better on my own
$(this).next('input[type="text"]').trigger('focus');
});
});
Have a nice day.
I have a problem that has taken me days to figure out.
The social follow icons I get from AddThis website appear vertically instead of horizontally. I want to make it appear horizontally but I have found that it is impossible to do so.
Below is the code I got from https://www.addthis.com/get/follow
<!-- AddThis Follow BEGIN -->
<p>Follow Us</p>
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_facebook_follow" addthis:userid="TheMostafaAbedi"></a>
<a class="addthis_button_twitter_follow" addthis:userid="theMostafaAbedi"></a>
<a class="addthis_button_google_follow" addthis:userid="106914586115617584077"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=xa-506a607f490b6601"></script>
<!-- AddThis Follow END -->
The specific page that the problem occurs is http://www.under-review.com/about under Mostafa Abedi description.
You've got line breaks between lines of code, which makes the icons go one below the other. You're most likely using the WordPress editor to insert the code, which alters the formatting.
If you're using Visual editor, switch to HTML editor and give it a try.
If you're using HTML editor, at the very least remove all the spacing between items, making them placed in one line, which would prohibit WordPress from entering new lines, i.e.:
<a class="addthis_button_facebook_follow" addthis:userid="TheMostafaAbedi"></a><a class="addthis_button_twitter_follow" addthis:userid="theMostafaAbedi"></a><a class="addthis_button_google_follow" addthis:userid="106914586115617584077"></a>
From my experience, about 90% of all formatting issues are fixed by good code and as a rule I follow W3C. I suggest you validate against that because at the moment it fails (both the HTML and CSS fails)
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Funder-review.com%2Fabout%2F
http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Funder-review.com%2Fabout%2F
I have a link at the bottom of a page, and its purpose is to link to an anchor on a different page. It doesn't seem to work in Firefox (at least, not in v8). Instead, on load it goes right to the very bottom of the page.
Any help is appreciated!
Source: http://msi.emsix.com/news/1900/1/Six-in-Ten-Employers-Hope-Health-Care-Reform-will-be-Repealed.aspx (the "Susan McIntyre" link at the bottom)
Anchor markup:
<h3 id="mcintyre" name="mcintyre">Susan McIntyre</h3>
Try adding the following code:
<a name="mcintyre"></a>
<h3 id="mcintyre">Susan McIntyre</h3>
This works correctly if I disable javascript.
It looks like what happens is that the scroll is done before you use script to collapse away a bunch of the content. So the final scroll position ends up wrong.
If you're collapsing the content away async, that could do it...
If you are unable to create <a name='%hashName%'></a> anchor, consider this:
$(document).ready(function(){
$(window.location.hash).append('<a name="' + window.location.hash.replace('#','')+ '"></a>');
window.location.href=window.location.href;
});
I know it looks weird, but works fine.
Since today I haven't heard about div anchor tags. Are you sure it is proper to expect such kind of behaviour from browsers?
After switching from firefox testing to internet explorer testing, some elements couldn't be found by selenium anymore.
i tracked down one locator:
xpath=(//a[#class='someclass'])[2]
While it works as it should under firefox, it could not find this element in ie.
What alternatives do i have now? JS DOM? CSS Selector? How would this locator look like?
Update:
I will provide an example to make my point:
<ul>
<li>
<a class='someClass' href="http://www.google.com">BARF</a>
</li>
<li>
<a class='someClass' href="http://www.google.de">BARF2</a>
</li>
</ul>
<div>
<a class='someClass' href="http://www.google.ch">BARF3</a>
</div>
The following xpath won't work:
//a[#class='someclass'][2]
In my understanding this should be the same as:
//a[#class='someclass' and position()=2]
and i don't have any links that are the second child of any node. All i want is, to address one link from the set of links of class 'someClass'.
Without knowing the rest of your HTML source it's difficult to give you alternatives that are guaranteed to work. Hopefully the following suggestions will help point you in the right direction:
//a[#class='someClass'][2]This is like your example, but the parantheses are not needed.
//a[contains(#class, 'someClass')][2] This will work even if the link has other classes.
css=a.someClass:nth-child(2) This will only work if the link is the 2nd child element of it's parent.
Update
Based on your update, try the following: //body/descendant::a[#class='someClass'][2]