I have a problem. I am trying to program running away button, but it keeps leaving browser window. Is there any way how to set some limitations to random movement? I am trying to add this button to Adobe MUSE website... ANY IDEAS PLEASE? Thanks!
<input onclick="location.href='http://www.besyx.sk/PF2017/gratulujeme.html';"
value="CHCEM ZVÝŠIŤ ADRENALÍN"
style="transition: all 0.3s ease 0s;
background: rgb(48, 197, 255) none repeat scroll 0% 0%;
color: rgb(255, 255, 255);
height: 50px;
border: 1px solid rgb(0, 153, 179);
border-radius: 100px;
padding-left: 20px;
padding-right: 20px;
margin-left: 0px;
margin-top: 0px;
margin-bottom: 0px;"
onmouseover="this.style.marginLeft=Math.random()*400+event.clientX/8+'px'; this.style.marginTop=Math.random()*400+event.clientY/8+'px';" type="button">
Related
I am new to web development and I have a bug that I cannot seem to fix. Basically, I have a button that highlights when its hovered and it works but there is a small outline of the original color when hovered. I'm pretty sure this is not because of an outline or a border. The bug is displayed in the picture provided. Here is the code:
body {
background-color: #2d2f31;
}
.start{
width: 200px;
height: 75px;
border: none;
color:black;
background-color: beige;
border-radius: 50px;
box-shadow: inset 0 0 0 0 rgb(36, 36, 37);
font-size: 15px;
outline: 0;
transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
cursor: pointer;
}
.start:hover{
box-shadow: inset 200px 0 0 0 rgb(36, 36, 37);
color: white;
}
<div class=buttondiv>
<button onclick="coming('maintext', '#F0F');" class='start' >button</button>
</div>
EDIT: I'm using Google Chrome and Windows 11 (idk if OS is important)
The box shadow is slightly transparent around those corners, allowing you to see the beige background color underneath. Changing the background color of the button on hover to the same color as the box shadow fixes this. The effect is ever so slightly different, but I can't really tell just from looking at it.
Also, on chrome, this box shadow transition blinks. I messed around with it and changed the 4th number to 1px and it stopped blinking. I couldn't tell you why, but there you go.
.start:hover{
background: rgb(36, 36, 37);
box-shadow: inset 200px 0 0 1px rgb(36, 36, 37);
color: white;
}
body {
background-color: #2d2f31;
}
.start{
width: 200px;
height: 75px;
border: none;
color:black;
background-color: beige;
border-radius: 50px;
box-shadow: inset 0 0 0 0 rgb(36, 36, 37);
font-size: 15px;
outline: 0;
transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
cursor: pointer;
overflow: hidden;
}
.start:hover{
background: rgb(36, 36, 37);
box-shadow: inset 200px 0 0 1px rgb(36, 36, 37);
color: white;
}
<div class=buttondiv>
<button onclick="coming('maintext', '#F0F');" class='start' >button</button>
</div>
I just got why it's like that. It's cause of your "beige" background. When I change it to "red" look how it is
red background button
Fix: Let's give background when :hover state is used
So your code will be like
.start:hover{
box-shadow: inset 200px 0 0 0 rgb(36, 36, 37);
color: white;
background: rgb(36,36,37);
}
Let me know how it is
The backstory is that I want to create a Google Chrome extension, and when it is active it creates a button on top of a website the user is currently on. I have looked at iframe, but Google Chrome does not allow iframe to load an html file. Any new ideas or alternate ways shared would be greatly appreciated!
Add in index.html file google chrome extension.
After adding, It will automatically activate and appear on the webpage.
HTML
<div class="ext-toggle-btn">
<span>Extension name</span>
</div>
CSS
.ext-toggle-btn {
background-color: rgb(242, 245, 247);
box-shadow: rgba(118, 118, 118, 0.11) 2px 0px 5px 0px;
opacity: 1;
height: 94px;
line-height: 1;
position: absolute;
left:-5px;
text-align: center;
top: 50%;
margin-top: -50px;
width: 30px;
z-index: 1000000001;
cursor: pointer;
border-radius: 0px 4px 4px 0px;
border-width: 1px 1px 1px;
border-style: solid solid solid none;
border-color: rgb(224, 228, 231) rgb(224, 228, 231) rgb(224, 228, 231);
border-image: initial;
border-left: none;
padding: 6px;
transition: right 0.25s ease-in 0.2s, opacity 0.35s ease-in 0.2s;
}
.ext-toggle-btn > span {
display: inline-block;
font-size: 12px;
left: -1px;
line-height: 14px;
position: relative;
top: 10px;
transform: rotate(-180deg);
writing-mode: tb-rl;
}
Github example link: https://github.com/vaibhavbhuva/simple-youtube-google-extension.git
With appropriate extension permissions, you should be able to insert HTML and CSS into the active tab. You can insert a div in the beginning of the document and position it in CSS with position:fixed|absolute, and that should have the div overlaying the webpage content.
You essentially want to insert your modal HTML and CSS into the active tab.
Please let me know if I understood your question. I would have left this as a comment but I don't have those account permissions yet lol.
I've been stumped by this for a bit and would really appreciate some advice if possible. So here is the offending website in question: Imran Ahmed's Website
The issue that I'm having is with these buttons: In the example above, the 'Devpost' button shouldn't just appear by itself, it should also have another button 'Github' next to it (as shown in the image below).
Now, while the div for this is in the correct place, the button actually appears right at the top of the screen (as an artefact) here:
This is obviously not the correct functionality for the website. In terms of things I have tried, I have attempted to change the CSS of the corresponding div (link-effect) to use position: absolute instead of position: relative - while this fixed the artefact, it ruins the button animations (which isn't useful).
Now, one thing I've noticed is that this seems to appear on Chrome only after the slide in animation (part of the WOW package) has finished. If you scroll down to the My Projects section and refresh the page you'll notice the button only disappears when the animation completes (here's an example of the formatting working correctly during the middle of the animation):
This leads me to believe there is a change the animation complete function is making that is causing this bug - but unfortunately I can't pinpoint it down. I tried using the chrome animation tool to dive down on the changes but I'm a rookie with web development/debugging and I couldn't make much headway.
With this in mind, I would really appreciate any advice you may have on how to resolve these artefacts! In addition, it would be great if the error could be explained - because I'd like to know how to avoid it in the future! Thanks for everything!
I believe the relevant code in question is below but I'm not exactly sure if this is indeed where the problem lies!
.link-effect {
width: 100%;
height: 42px;
display: inline-block;
padding-bottom: 20px;
-webkit-overflow-scrolling: touch;
}
.link-effect a {
margin: 0 auto;
color: rgba(230, 126, 34, 1);
position: relative;
padding: 16px 7px;
border-top: 2px solid rgba(230, 126, 34, 0);
border-bottom: 2px solid rgba(230, 126, 34, 0);
transition: padding .3s, border-color .3s;
font-size: 14px;
-webkit-transform: translate3d(0, 0, 0);
}
.link-effect a::after,
.link-effect a::before {
position: absolute;
left: 0;
bottom: 0;
right: 0;
max-height: 0;
color: rgba(230, 126, 34, 0);
content: attr(data-text);
transition: max-height .3s, border-color 0s
}
.link-effect a:focus,
a:hover {
padding: 5px 7px;
border-color: rgba(230, 126, 34, 1);
outline: 0
}
.link-effect a::before {
top: 0;
border-left: 2px solid rgba(230, 126, 34, 0)
}
.link-effect a::after {
padding: 5px;
border-right: 2px solid rgba(230, 126, 34, 0)
}
Hope this helps :)
.link-effect {
width: 100%;
height: 42px; // remove this
padding-bottom: 20px;
-webkit-overflow-scrolling: touch;
display: flex; // add this
justify-content: center; // add this
}
.link-effect a {
margin: 0 5px; // change this
color: rgba(230, 126, 34, 1);
position: relative;
padding: 5px 7px; // change this
border-top: 2px solid rgba(230, 126, 34, 0);
border-bottom: 2px solid rgba(230, 126, 34, 0);
transition: padding .3s, border-color .3s;
font-size: 14px;
-webkit-transform: translate3d(0, 0, 0);
}
I created a modal dialog using CSS3, it works perfectly. But my site is responsive and the modal has to appear on several items inside an iframe (see here: http://labs.tageswoche.ch/interaktives/filmPortraits/ and here: http://master.tw.felix.sourcefabric.net/de/2014_11/international/652865/Drei-Jahre-B%C3%BCrgerkrieg-und-kein-Ende-in-Sicht.htm). In the iframe it doesnt work, but it works as expected on the real site.
The modal dialog is implemented on the first two pictures.
And here the code:
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background: #00d9ff;
}
Here is a jsfiddle I used to implement the modal dialog:
http://jsfiddle.net/kumarmuthaliar/GG9Sa/1/
What i want to achieve is that the modal appears where the mouse click was (or more or less) so that also on mobile devices on the last images of the wall. Right now the modal appears on top. How can I implement this? I have no clue.
One thing I'd like to say about your design is, do not make separate modal window htmls for each person's modal, use one modal and change its innerhtml as you click on different people so you write less code, easier to maintain (if you add changes to your modal, you do one change in one location etc)
Also, the nature of modal windows is, it has a semi transparency background, with the modal window floating (not in css context) in the middle of it.
If you see this css bit below you'll understand better:
.modalDialog > div {
width: 600px;
position: relative;
margin: 5% auto;
padding: 5px 20px 13px 20px;
background: #fff;
}
The bit that says "margin: 5% auto;" causes this behaviour, what you need to do is change this to the same notation the padding is set and for each position of the image, give it certain values, ie margin: 10px 10px for a modal window that just shows at the top left corner of the window etc if you're not too fussy about exact mouse location.
If you are, than use "onclick" event of your outermost background div with width/height equal to the overall size of every person's image included, than use the event object to get mouse location values (read this link http://www.w3schools.com/jsref/event_clientx.asp)
I didn't write it for you so that you can do it yourself and learn, hope this helps!
what is the simplest way to create a thin email signup bar at the top of the browser, that stays there as the user scrolls down and navigates to different pages?
i'm using wordpress and I already have jquery loaded, but haven't programmed anything using jquery or wordpress yet.
i've been mostly a user up to now and know html, css and some php and javascript.
thanks
B
Just create a container div for the signup button and add it wherever you would like the button to appear (your page.php, single.php, index.php) or header.php to have it everywhere as another poster suggested. Here is a basic demo and some code that you can use:
HTML
<div class="signup">
<a class="signupbtn" href="#" title="Sign up">Sign Up</a>
</div>
CSS
.signup {
position:fixed;
left:0;
top:160px;
}
a.signupbtn {
color: #6e6e6e;
font: bold 12px Helvetica, Arial, sans-serif;
text-decoration: none;
padding: 7px 12px;
position: relative;
display: inline-block;
text-shadow: 0 1px 0 #fff;
-webkit-transition: border-color .218s;
-moz-transition: border .218s;
-o-transition: border-color .218s;
transition: border-color .218s;
background: #f3f3f3;
background: -webkit-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
border: solid 1px #dcdcdc;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
margin-right: 10px;
}
a.signupbtn:hover {
color: #333;
border-color: #999;
-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
a.signupbtn:active {
color: #000;
border-color: #444;
}
And here's a basic demo of the button in use:
http://jsfiddle.net/andresilich/FAVK9/1/
Basically when you want something to stick to a special place even when browser scrolls, you should use fixed positioning.
I strongly suggest you read this article (from A List Apart), to grasp what CSS Positioning means.
You can put the div as in the example in HTML code on every page (I don't know how it looks in Wordpress, but there must be some header php file that is loaded on every page).
CSS:
div#signup{
position:fixed;
top:0;
right:0;
width:100px;
min-height:30px;
background-color:red;
text-align:center;
}
HTML:
<div id="signup">
Sign up
</div>
A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>
A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>
A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>
A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>
A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>
A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>
Edit: I changed code a bit after the comment + added live demo (it interferes a bit with JSFiddle because their objects are also top-right aligned).