html

transition between background color and background image CSS3

由 落爺英雄遲暮 提交于 2021-02-05 05:30:08
问题 I've got a set of divs and I want each of them to have different background color and while on hover to transition into a background image of chosen url. I have so far managed to find code for smooth color -> image transition but that requires an actual img code in HTML and I need those divs as I will be putting text in them. Is there any chance to have a smooth 0.5s or less transition from background color to background url performed through CSS? If you look at http://loopedmag.com you can

transition between background color and background image CSS3

由 老子叫甜甜 提交于 2021-02-05 05:29:48
问题 I've got a set of divs and I want each of them to have different background color and while on hover to transition into a background image of chosen url. I have so far managed to find code for smooth color -> image transition but that requires an actual img code in HTML and I need those divs as I will be putting text in them. Is there any chance to have a smooth 0.5s or less transition from background color to background url performed through CSS? If you look at http://loopedmag.com you can

transition between background color and background image CSS3

由 瘦欲@ 提交于 2021-02-05 05:29:11
问题 I've got a set of divs and I want each of them to have different background color and while on hover to transition into a background image of chosen url. I have so far managed to find code for smooth color -> image transition but that requires an actual img code in HTML and I need those divs as I will be putting text in them. Is there any chance to have a smooth 0.5s or less transition from background color to background url performed through CSS? If you look at http://loopedmag.com you can

Check if array value is included in string

由 為{幸葍}努か 提交于 2021-02-05 05:28:05
问题 I'm working on some client side validation for a contact form of sorts, the website currently isn't online so server side isn't relevant. I am trying to create a 'word filter' to catch on any abusive of obscene language before the form is 'submitted'. Heres the code, without the obscenities... function filterInput(str) { var inputFilter = ['word1', 'word2', 'word3']; var arrayLength = inputFilter.length; if (inputFilter.indexOf(str) > - 1) { // Word caught... } else { // Clear... } If the

JavaScript window.onload versus body.onload

由 馋奶兔 提交于 2021-02-05 05:26:36
问题 My question is similar but a bit different than the one asked here, window.onload vs <body onload=""/> In that question, it was a comparison between using window.onload and the inline js . My question is the difference between the following. Assume the body tag has an Id of "bodyTag". document.getElementById("bodyTag").onload = function () { alert("hi"); } vs window.onload = function () { alert("hi"); } Exactly, what are the differences between those two and when should I use one versus the

CSS to align label and inputs on form

由 白昼怎懂夜的黑 提交于 2021-02-05 05:25:07
问题 I have a problem with aligning my labels and input fields in a form. Time and again I end up with something like this: Which is produced with HTML like so: ... <ul> <li> <label for="STREET">Street</label> <input data-val="true" data-val-required="The Street field is required." id="STREET" name="STREET" type="text" value="P.O. Box 1053" /> </li> <li> <label for="SUITE">Suite</label> <input id="SUITE" name="SUITE" type="text" value="" /> </li> <li> <label for="city">City</label> <input data-val

JavaScript window.onload versus body.onload

由 為{幸葍}努か 提交于 2021-02-05 05:24:25
问题 My question is similar but a bit different than the one asked here, window.onload vs <body onload=""/> In that question, it was a comparison between using window.onload and the inline js . My question is the difference between the following. Assume the body tag has an Id of "bodyTag". document.getElementById("bodyTag").onload = function () { alert("hi"); } vs window.onload = function () { alert("hi"); } Exactly, what are the differences between those two and when should I use one versus the

How can I get rid of the gap at the edge of the page?

由 我是研究僧i 提交于 2021-02-05 04:59:36
问题 I already set the border, padding and margin to 0px for the body and two of my divs. But I still can't seem to get rid of the gap. #body{ padding: 0px ; border:0px ; margin:0px; width:100%; height:100vh; } #mainPage { height:100vh; width:100%; background-color: #2469ff; padding: 0px; border:0px; margin:0px; } #navBar{ height:70px; width:100%; Background-color: #1f1f1f; padding: 0px ; border:0px ; margin:0px; } That's all my CSS so far. Here is my HTML. It's very basic at the moment. <html>

How can I get rid of the gap at the edge of the page?

由 怎甘沉沦 提交于 2021-02-05 04:59:23
问题 I already set the border, padding and margin to 0px for the body and two of my divs. But I still can't seem to get rid of the gap. #body{ padding: 0px ; border:0px ; margin:0px; width:100%; height:100vh; } #mainPage { height:100vh; width:100%; background-color: #2469ff; padding: 0px; border:0px; margin:0px; } #navBar{ height:70px; width:100%; Background-color: #1f1f1f; padding: 0px ; border:0px ; margin:0px; } That's all my CSS so far. Here is my HTML. It's very basic at the moment. <html>

Change Position of svg element using JS

由 时光总嘲笑我的痴心妄想 提交于 2021-02-05 04:57:13
问题 Trying to make an svg rectangle that moves when button pushed. Right now I just want the x to be modified by a function. function modX() { document.getElementById("rectangle").transform = 'translate(295 115)'; } var x = 20; var y = 20; modX(); <svg width="1000" height="1000" > <rect id="rectangle" x="0" y="20" width="100" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)"></rect> </svg> I'm fairly new to code so please avoid css or jquery. 回答1: you can change its x by
订阅 html