This question already has answers here:
Delete destination Url of link on the bottom of browser's page
(2 answers)
Closed 9 years ago.
When you go over a link you'll see a white box with the full link on your left bottom of the browser.
How do you remove this from my website?
Thank you in advance!
That box is inserted by your browser, not the page. You can't remove it, and for good reason -- it's there to help you understand where a link will take you, and anyone wanting to hide that information is up to something dubious.
Just use inline JavaScript:
click here
That's the browser doing that. You can't remove it. It's a good thing too, so the user can see where they're going.
With that said, you can javascript the location to a new page (of course you can style this like a link, if you want).
<span onclick="location.href = 'url';">Click Me!</span>
If you just did this:
click me!
, you'd still get a white box (saying thispage/#) at the bottom because it's still a link. So, if you want to remove that box all together, use the first option.
See Fiddle (Note: This particular example won't work in JSFiddle, but you can still implement it into your own page)
you can remove like using script like:
$("a").attr("href", "#")
or with conditional statement
$("a[href='http://www.google.com/']").attr('href', '#')
Related
This question already has answers here:
Center a div in CSS [closed]
(10 answers)
Closed 4 years ago.
Hi everyone I'm a beginner in HTML, and I need to know how to center an URL inside my web page, for example :
Click Here to Open Google
I tried to use the tag, and the STYLE attribute but it doesn't work.
Can some one help me to make it please ?
You could try in your css file:
a {display:block;text-align:center}
Hope this helps, personally I would add a class name to your a link such as google-link, otherwise this a style will effect all future anchor links :)
So in html file:
Click here to open google
Then in css file:
.google-link {display:block;text-align:center}
In addition your href needs to include a = after it: href="www.google.com"
i think the reason is because your DOM only covers the width of your text link which is "Click Here to Open Google". so centering it with the "center" tag will not give what you want.
Please try this:
<div style='width:100%; text-align:center;'> Click Here to Open Google
Explanation is, you created a "div" element and gave it a 100% width, then specify that anything inside it will be center aligned.
This will solve your problem. Kindly check the codepen link for demo:
https://codepen.io/deepesh316/pen/jQWRYy
For more info about css display block, you can refer w3 schools link:
https://www.w3schools.com/cssref/pr_class_display.asp
You can simply try this solution.
In above, your href should look like below code and then you can use style which will center your link.
<a href:"http://www.google.com" style="text-align:center"> Click Here to Open Google <\a>
Or else you can try
<div text-align="center">your link code here( )......</div>
I made this website for my dad's business and you can see a contact form if you scroll a bit down. I'd like us to go to the Mobile View of the page through Google's DevTool (F12 and then Ctrl+Shift+M; or left besides "Elements"). I will show you what's wrong.
If you go to where it says "Treibstoff", try selecting the 4 different options. You will notice that you can't select the bottom two, "Diesel" and "Elektro".
Well, you can actually. If you press slightly above of the end of the word, but you can't select it like one usually does.
If we inspect the elements (Ctrl+Shift+C), we see that the box of "Typenscheinnr." is overlapping "Diesel" and "Elektro" (Inspect a bit above "Typenscheinnr.", not directly on it). A fix I found for this is: Inspect click the big overlapping box of "Typenscheinnr.", scroll down under Styles until you see that multilayered box, set upper margin to 45 with doubleclick.
This should fix it, but I don't know how to make this change go live. I did some research and all I got were solutions similar to "do !important" and then some code. Those were also for the whole site or something like that ...
Anyway, any help would be appreciated and I'm again sorry if this question is stupid. If there's more information you'd like to know, by all means just ask me.
Thanks for reading!
Just use clear: both
If you place a <div style="clear: both"></div> right before the end of the Treibstoff: <p> tag, the behavior will be the expected one.
This happens because you are using float
I'm lost. I have no idea what I'm doing, so please forgive me if I write something stupid or don't understand your answers.
My goal is to have a modal box showing after clicking a button. That's the easy part and I accomplished that already, so yay me.
Basically, I'm using this code:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal2
Now, what I don't know how to do:
1) How do I change the appearance of the button? Can I change it to an image?
The only thing I could do is place an image IN the button (looks weird), but not replacing it.
2) How do I change the position of the button?
I would like to have few buttons on the left side of the screen (not website but screen). So I would need to adjust them to be on the left side, and I would also need to change the height of all the buttons.
Now, I changed the appearance and the position of the button when trying something else (a slideout), so I know it's possible. But the codes are different and I don't know how to "merge" them. The lines that work in the first one don't work in the another.
And I have absolutely no idea in what language it is. I know that it uses this createElement thing to create this button, but I don't know how to change anything about it. I went through the whole w3school and many topics on this site but I don't know how to use this knowledge - so maybe you could help me out. Thank you!
If you want to use an image to open the modal, you should not use the button tag. Just attach your event to an img.
using the example code, replace:
<button id="myBtn">Open Modal</button>
with
<img id="myImg"></img>
and attch the click event to "myImg"
var img = document.getElementById("myImg");
img.onclick = function() {
modal.style.display = "block";
}
Repositioning is going to be a little more difficult to answer without seeing your full code. W3Schools has a good intro to CSS for beginners so I would start there.
Replace button to code similar to this id="myBtn" is important
<img id="myBtn" src="image url">
And check
https://www.w3schools.com/css/default.asp
Css is used to design the html elements
it have some property like
height, background-image , position , float , flex etc
which can help you to achieve your goals.
As the title states I'm having a bit of trouble with an element on my 'work in progress' website.
I currently have an unordered list which provides square sections (with a different image and link in each) On a hover, the image changes opacity and the background color changes also.
The problem I'm facing is that while the cosmetic effects are all working fine, the link is not working on click. (However, the link does display in the bottom of my browser as 'followable' and right clicking allows for following the link through the options there.
The link for the element is http://www.techcom.co.nz/#myclients
and currently the only element with an attached link is the img for steam. (Column 2, Row 2)
Any help anyone can offer would be greatly appreciated.
Regards
Add the following code to your images...use javascript
example
<img src="" alt="" onclick='window.location="URL HERE"'>
please remember not to get the quote marks mixed because it will not work otherwise and looking at your source you have no URL the images should be going to apart from #
I don't understand exactly what's the problem.
The links on "my work" section are not working because the links to "#" (none) try to give them real url.
I'm struggling to replicate the login form found at the top of the PayPal website.
I have been able to create the username and password fields including the 'blue glow' from searching the web for tutorials; however, I'm unable to find any coding to add the 'clickable' question mark to the field.
I would like to be able to replicate the drop down when the question mark is clicked.
Any help will be greatly appreciated.
I hope I have made it clear.
What you could do is in your form have the question-mark image trigger a java-function... Ex:
<img src="my_image.jpg" onClick="myjava_function()">
Then in your java function you could have a div containing the drop-down displayed.
<script type="text/javascript">
myjava_function(){
document.getElementById('mydiv').style.display="block"
}
</script>
Then in near the form you could have your div that contains the drop down first being hidden but shown on the click.
<div id="mydiv" style="display:none;"><form><select><option value=1>1</option></select></form></div>
This would be my approach to getting it done. Firstly, try and get a log that is similar to the question mark, and position it in the div that you would place your area at. In the CSS for the logo apply float right so that the logo would appear to the right of that div. Then build a whole div that appears when you click the log before hand and give it the CSS display none, hence it would not be shown. Write a javascript function that works with the onclick you apply on the logo that changes the CSS of that div to display block and hence the whole div appears when you click it. The div by itself has a cross mark that could trigger another javascript call to change the CSS to display none. Good luck.