We Keep Coding

How to make when hover an image to change color and arrow of the button to make transparent

I am working on project with VueJS add vutify. I have created the component v-card vutify. Into v-card I have v-img, v-card-action which into it I have set text and button to separate each side.
I am sharing my link on code pene what I have done until now just as example.
[enter link description here][1]
I want to achieve effect when I click hover image to change color and arrow into of the button to make transparent. Any idea?
Exactly as the link I am sharing below.
[enter link description here][2]
[1]: https://codepen.io/venallanaj/pen/PoEbKYx

The link you provided does not work. Please supply a valid example. Also, please clarify your question. What element/s do you want to change color? Do, you want the elements to change color when the mouse is hovered over the element?
To change color of an element when you hover over the element you could grab the element in CSS and then add the ::hover selector to produce the results.
For example, the following would change the behavior of the input element when the mouse is overed over it.
`input {
border-radius: 2px;
border: 1px solid lightgray;
color: rgb(100, 100, 100);
background-color: transparent;
height: 28px;
line-height: 0;
transition: 0.5s;
}
input:hover{
border: 1px solid black;
color: black;
cursor: pointer;
transition: 0.5s;
}`

Make room between divs when clicking a div to show hidden content

What I want to do is add functionality such that if I click any div bar, space opens up below it to allow me to see a hidden div. Clicking the original bar will re-hide the hidden div and remove the expanded space between the div bars.
When the hidden divs are hidden the layout looks like this:
When a div bar is clicked, the layout expands so that the hidden div is visible between the rows of div bars. The space between the bars expands to make room for the hidden div. (Blue "Hidden 2")
This is not a duplicate of another question out there because all of the other questions were more narrow and do not address the functionality I am trying to achieve with divs.
.bar {
width: 400px;
height: 30px;
border: solid 1px #aaa;
border-radius: 8px;
padding: 20px;
font-size: 24px;
margin: 15px;
background-color: #ccc;
z-index: -2;
}
.hidden-data {
display: none;
width: 350px;
height: 70px;
border: solid 1px #aaa;
border-radius: 8px;
padding: 20px;
font-size: 24px;
margin: 15px;
background-color: #e6eeff;
z-index: 1;
}
<div class="bar" id="bar1">Bar 1</div>
<div class="hidden-data" id="hidden1">Hidden 1</div>
<div class="bar" id="bar2">Bar 2</div>
<div class="hidden-data" id="hidden2">Hidden 2</div>
<div class="bar" id="bar3">Bar 3</div>
<div class="hidden-data" id="hidden3">Hidden 3</div>
<div class="bar" id="bar4">Bar 4</div>
<div class="hidden-data" id="hidden4">Hidden 4</div>
I have seen solutions that use < ul > < li > and solutions that use checkboxes, but I am using neither. (And I could get neither to work with my divs)
I have seen solutions that use spans, but those only support one row. If you add more than one row, then both rows respond to the click.
https://jsfiddle.net/tzfa81cp/73/
I saw a solution that uses < summary > < details > which looks like it is an all text version of the functionality I want, but this seems like it may not be supported by most browsers. (And I couldn't get it to work with divs.)
http://jsfiddle.net/thurstanh/emtAm/2/
A CSS solution would be great if there is one, but am definitely open to a JavaScript solution. I am new to jQuery
To reiterate the question:
I want to be able to click Bar 1 and have a box "Hidden 1" open below it, moving the other div bars down to make room. Then to close the hidden div, I click Bar 1 again. (or click an x in the hidden div).
How can this be done?
My codepen is here:
https://codepen.io/Chris_Nielsen/pen/xWNmYy

The Summary/Detail solution is toggling due to built in functionality - something div's do not have out of the box.
A jQuery solution would be simple, something like:
$(function() {
$(".bar").click(function() {
$(this).next(".hidden-data").toggle();
});
});

I have seen simple solutions to this problem using Javascript. In theory, you could have a div set up to display, ":hover" (sp?), but I have never seen it in practice. Worth exploring?

Editable DIV with clickable hyperlinks

I got the 1st part working of creating a div that contains clickable hyperlinks.
HTML:
<div id="input" contenteditable>
<div contentEditable="false">
Visit W3Schools - Visit W3Schools - Visit W3Schools
</div>
</div>
CSS:
#input {
-moz-appearance: textfield;
-webkit-appearance: textfield;
background-color: white;
background-color: -moz-field;
border: 1px solid darkgray;
box-shadow: 1px 1px 1px 0 lightgray inset;
font: -moz-field;
font: -webkit-small-control;
margin-top: 5px;
padding: 2px 3px;
width: 398px;
}
Per above code, i have a DIV that looks like an editable field containing 3 hyperlinks that user can click and navigate to corresponding pages.
And that part works fine.
Now what i want is, i want this DIV to be editable so that user can manually enter another hyperlink and click on a button and this new hyperlink will also be shown as a clickable item in the DIV along with the already existing 3.
Also user should be able to delete an already existing hyperlink.
How to do that?

JSFIDDLE https://jsfiddle.net/seadonk/vg4m5tso/
You can add new items using .append(). In my example i create a new link from the text in a textbox, and
$('selector').append(content);
You can delete items by selecting them and calling .remove(). Add a delete element next to the link, then add a click event handler:
$('.delete').click(function () {
$(this).prev('a').remove();
}

I want to fade the border and background of a span without affecting its contents in jQuery

I'm making a navigation system on some of the pages of my website that is roughly like this:
<span>Page</span>
Where each navigation link would look like that. I want the link representing current page
to have the following properties:
background-color: buttonface; border: 2px solid grey; border-radius: 5px;
and all navigation links to have these properties:
padding: 0 6px 0 6px;
In addition I wanted to make the border and background of the current page's link fade into any link on .mouseenter() and fade out on .mouseleave() unless it is the current page in which case it should not fade out. I am relatively new to jQuery and I have no idea how to do this.
It isn't completely necessary for the links to be in the format I put above as long as they're listed horizontally across the page and have the properties I specified. If it matters my site also uses the following code for style already:
body{font-family: 'Raleway'; background: #F07400; color: black; font-size: 18px; margin: 20px 0 20px 20px;}
button{font-size: 18px; font-family: 'Raleway'; border-radius: 5px; border: 2px solid grey;}
and
$(document).ready(function() {
widthval = $(window).width()-40;
$("body").css("width", widthval);
$("body").fadeOut(0);
$("body").fadeIn(1600);
$(window).resize(function(){
widthval = $(window).width()-40;
$("body").css("width", widthval);
});
});

You could layer two body layers, by placing a body2 positioned absolute as a child element of body, which would draw it ontop of body. Have the body 2 contain the border information and body contain the content. Then fade body2.
But this solution would require the content to exist in both body and body2 because clicks would be blocked to body and processed through body2.
updated
<div style="width:needed; height:needed;">
<div2 style="position:absolute; width:sameAsBody; height:sameasbody" class="fade">
this content will fade.
</div2>
content content here will be faded to. If changing just the background it would be literially the same hence it appears that the content did not fade.
</div>
$(document).ready(function(){
$(‘.fade’).fadeTo(2000, 1.0).fadeTo(4000, 0.0);
});

Replacing normal file upload input with an image

Bit of a newbie question here.
I have a form and one of it's fields is for a file upload. Instead of having the boring old usual text input box with a 'choose file' button beside it, I'd like to have an image which when you click opens the dialog box to browse for the photo.
The way I was hoping to be able to do this was with two forms. IE when the user clicks the image a modal box appears with form upload input in it. User chooses file and clicks submit the user is returned to the form.
That doesn't seem to work because having a form inside a form must be bad practice i suppose :) Is there a way to do it like this?
The alternative is that I can somehow replace the usual text input box with the 'choose file' button with my own graphic but despite google I ain't found out how to do that.
Any ideas

Very simple solution - simply put a label tag for your input
<label for="uploadFile">
<div id="image"></div>
</label>
<input type="file" id="uploadFile" style="display:none" />
And the just add a background-image property to the #image div :)

Because of the heap of security issues around how file inputs work, they're pretty hard to fix. What does work, however, is a scheme like this:
Design your own look for a file input that's fairly close to the default one in size and shape
Position your file input and a real file input at the same place in your form, with the real one on top of yours
Make the real input be transparent (that is, set the opacity to zero)
Now clicks on your elements styled the way you want them to look will actually be interpreted by the browser as clicks on the file input. You have to tweak things somewhat for IE, because IE7 allows the user to type directly into the input while other browsers all immediately launch the file chooser when the element is clicked anywhere.
edit — here is a jsfiddle that works in Chrome at least. The HTML:
<div class='fancy-file'>
<div class='fancy-file-name'> </div>
<button class='fancy-file-button'>Browse...</button>
<div class='input-container'>
<input type='file'>
</div>
</div>
That wraps the "fake" file input that I'll style with my own CSS, as well as the real <input> element. Here's the CSS:
div.fancy-file {
position: relative;
overflow: hidden;
cursor: pointer;
}
div.fancy-file-name {
float: left;
border-radius: 3px;
background-color: #aaa;
box-shadow:
inset 1px 1px 3px #eee,
inset -1px -1px 3px #888,
1px 1px 3px #222;
font-weight: bold;
font-family: Courier New, fixed;
width: 155px;
font-size: 12px;
padding: 1px 4px;
}
button.fancy-file-button {
float: left;
border-radius: 3px;
border: 1px solid red;
background-color: #F5BD07;
font-weight: bold;
vertical-align: top;
margin: 0 0 0 3px;
}
div.input-container {
position: absolute;
top: 0; left: 0;
}
div.input-container input {
opacity: 0;
}
The outer container is made "position: relative" to make it easy to position the real <input> over the fake stuff. The fake stuff has my made-up fancy styles, and it's sized so that it's just about the same as the overall size of a real file input. The real one is absolutely positioned and transparent.
Here's some jQuery to drive it:
$('div.fancy-file input:file').bind('change blur', function() {
var $inp = $(this), fn;
fn = $inp.val();
if (/fakepath/.test(fn))
fn = fn.replace(/^.*\\/, '');
$inp.closest('.fancy-file').find('.fancy-file-name').text(fn);
});
Browsers won't give you the complete pathname, but they'll give you a part of it. Some browsers (Chrome and IE) give you an obviously-fake path prefix, so the code strips that out (because it's useless).

File upload fields are quite limited. See: http://www.quirksmode.org/dom/inputfile.html