Develop Reference

Change text of "choose file" buttons in contact form 7 (WordPress)

The file upload field is controlled by the browser so that one should automatically be translated based on the browsers settings. I need set my language on this button. How I can do that?

I've found solution on sitepoint. Just below .file-resume on your file input name and then modify your button.
/* Style wrapping span as button */
span.wpcf7-form-control-wrap.file-resume {//FILE-REsume == your name of file input
display: inline-block;
position: relative;
width: 120px;
height: 40px;
border-radius: 5px;
border: solid 1px #11b28e;
background: gray;
color: #FFF;
overflow:hidden;
}
/* Made input big and move it left and top inside wrapper to hide actual control but leave input clickable */
input.wpcf7-form-control.wpcf7-file {
position: absolute;
width: 1500px;
height: 1000px;
right: 0;
bottom: 0;
outline: none !important;
}
/* Add button text */
.wpcf7-file:before {
content: "прикріпити файл";
display: block;
width: 120px;
height: 40px;
line-height: 40px;
text-align: center;
position: absolute;
right: 0;
bottom: 0;
color: #FFF;
font-size: 16px;
}

To change the text 'Select File' on the button I use the code below. And it works fine for me.
However, I can't change the text "No file chosen" next to the button.
Can anyone tell me something about this topic?
.wpcf7-file::-webkit-file-upload-button {
visibility: hidden;
}
.wpcf7-file::before {
content: 'Select File NEW';
display: inline-block;
background: #00a0dd !important;
padding: 15px 15px;
outline: none;
white-space: nowrap;
-webkit-user-select: none;
cursor: pointer;
font-weight: 700;
font-size: 10pt;
color:#FFF
}
.wpcf7-file:hover::before {
border-color: black;
}
.wpcf7-file:active::before {
background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
}

Vertically center search box before and after inserting another elements

$(function() {
$('.forminput input[type="text"]').on('input propertychange', function() {
var $this = $(this);
var visible = Boolean($this.val());
$this.siblings('.glyphicon').toggleClass('hidden', !visible);
}).trigger('propertychange'); //nema potrebe za njim
$('.glyphicon').click(function() {
$(this).siblings('input[type="text"]').val('')
.trigger('propertychange').focus();
$('.results').empty();
});
$('.forminput').on('submit', function(event) {
event.preventDefault();
var typed = $('.nice').val();
$.getJSON('http://en.wikipedia.org/w/api.php?callback=?', {
action: 'query',
srsearch: typed,
format: 'json',
list: 'search'
}, function(data) {
$('.results').empty();
console.log(data);
$.each(data.query.search, function(index, item) {
$('.results').append("<a class='append' href='http://en.wikipedia.org/wiki/" + encodeURIComponent(item.title) + "'>" + "<div class='appendsearch'><h1>" + item.title + "</h1><p>" + item.snippet + "</p></div></a>")
})
})
})
})
body {
background: rgb(9, 43, 64);
font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
height: 90vh;
}
.wrapper {
display: flex;
justify-content: center;
align-items: center;
}
.container {
margin-top: 30px;
display: flex;
justify-content: center;
align-items: center;
}
.glyphicon {
color: #B2DFDB;
}
.textbox {
text-align: center;
}
.randomArticle {
color: #B2DFDB;
font-size: 1.4em;
}
.randomArticle:hover {
text-decoration: none;
color: pink;
cursor: pointer;
}
.randomArticle:link {
text-decoration: none;
color: #B2DFDB;
}
form {
margin-top: 30px;
margin-bottom: 30px;
}
form .nice {
width: 300px;
border-radius: 10px;
border: 5px solid orange;
background: transparent;
color: white;
padding: 7px 15px;
}
form .nice:focus {
outline: none;
}
.button {
border-radius: 10px;
border: 5px solid orange;
padding: 7px 15px;
margin-left: 20px;
background: transparent;
color: #B2DFDB;
}
.button:hover {
background: #00897B;
}
.button:focus {
outline: none;
}
.append {
color: black;
}
.append:hover {
text-decoration: none;
}
.appendsearch {
background: rgb(230, 230, 231);
margin: 20px 70px 20px 70px;
padding: 10px 20px;
color: black;
border-left: 4px solid rgb(9, 43, 64);
font-weight: 500;
}
.appendsearch h1 {
font-size: 20px;
font-weight: bold;
}
.appendsearch p {
font-size: 15px;
}
.appendsearch:hover {
border-left: 4px solid orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class='container'>
<div class='wrapper'>
<div class='textbox'>
<a class='randomArticle' href='https://en.wikipedia.org/wiki/Special:Random' target='_blank'>Click here for a random article</a>
<form class='forminput'>
<input class='nice' type='text'>
<span class='glyphicon glyphicon-remove hidden'></span>
<input class='button' type='submit' value='Search'>
</form>
</div>
<div class='results'></div>
</div>
</div>
</body
I cant get elements to be vertically centered before and after search results are inserted. I tried a lot of options but all I get is situation where search box is inserted on the left side of search result.
Here is the sample > http://codepen.io/Todorovic/pen/PGrqOp

What I did to make this work, is to add some line of code with jQuery.
To to center div horizontally and vertically change css:
$('.textbox').css({
'position' : 'absolute',
'left' : '50%',
'top' : '50%',
'margin-left' : function() {return -$(this).outerWidth()/2},
'margin-top' : function() {return -$(this).outerHeight()/2}
});
For working with dimensions if you are not familiar check:
http://api.jquery.com/outerwidth/
http://api.jquery.com/outerheight/
And down in your code after submit form change again css of div to put it on top of page:
$('.textbox').css({
'position' : 'absolute',
'left' : '50%',
'top':'0%',
'margin-top' : '30px',
'margin-left' : function() {return -$(this).outerWidth()/2},
});
After append results add margin-top for div:
$('.results').css({
'margin-top': $('.textbox').height()
})
})
Here is CodePen example:
http://codepen.io/anon/pen/NRZwEJ

Hope the elements are not dynamic, and you have a fixed structure of elements around the search box. After finalizing the element structure and the styling of them you have to identify the height of the textbox element. At the moment it is 47px. We will use this value in the following css.
Next add the following styles into the css.
.textbox {
text-align: center;
position: absolute;
top: 50%;
margin-top: -23px;
}
Please note that the value of the margin-top is half of the 47px( half of the textbox element. )
Edit
Add the following line into your jquery code.
$('.forminput').on('submit', function(event) {
$('.textbox').addClass('pull-up');
After that, update you css with the following additional styles.
.textbox {
text-align: center;
position: absolute;
top: 50%;
margin-top: -23px;
}
.textbox.pull-up {
position: relative;
top: auto;
}

Issue with jQuery chat form

Thank you for the help in advance.
This project is a signup form that will use a chat system to collect the user's profile details during their onboarding process. This is my first jQuery project, so I am struggling to spot my mistakes.
My jQuery should append the value in the textarea to the #message-feed div and apply the CSS classes of .message, .bubble and .user to the new element it creates.
However, when I type into the text area and click submit, it flashes the value I have just typed with no styling in the message feed, but it instantly disappears.
The reason for this CSS structure is the interchangeability between the .bot and .user classes depending on whether it is a question presented to the user by the website, or a user's response to a question.
Here is a link for a JSFiddle but it loads very differently than on my local machine (JSFiddle shows errors.
HTML
<div id="container">
<div id="message-feed">
<h1>Let's get to know you a little bit more…</h1>
</div>
<form method="POST">
<div id="text-response">
<textarea id="text-response" placeholder="Type in here…"></textarea>
</div>
<input type="submit" class="submit-response">
</form>
</div>
CSS
#container {
width: 320px;
height: 480px;
background-color: #fff;
position:absolute;
left:50%;
top:50%;
margin:-240px 0 0 -160px;
}
#message-feed {
width: 100%;
height: 100%;
margin: auto;
overflow-y: scroll;
}
.message {
padding: 0px 15px 15px 15px;
width: 90%;
}
.message:after {
content:"";
display: block;
clear: both;
}
.bubble {
border: 0.5px solid #005393;
max-width: 80%;
padding: 10px;
}
.bot {
color: #005393;
float: left;
border-radius: 12px 12px 12px 0px;
}
.user {
float: right;
background-color: #005393;
border-radius: 12px 12px 0px 12px;
color: #fff;
}
#text-response {
height: 23px;
width: 220px;
border-top: 1px solid #eee;
background-color: #fff;
float: left;
}
textarea {
height: 20px;
width: 220px;
float: left;
resize: none;
border: none;
padding: 10px;
line-height: 22px;
font-family: 'Roboto', sans-serif;
font-weight: 200;
letter-spacing: 1px;
font-size: 15px;
outline: none;
overflow: auto;
}
.submit-response {
height: 45px;
width: 80px;
background-color: #005393;
color: #fff;
float: right;
text-align: center;
line-height: 42px;
font-family: 'Roboto', sans-serif;
font-weight: 200;
letter-spacing: 1px;
font-size: 15px;
outline: none;
border: 0;
}
.submit-response:hover {
opacity: 0.5;
}
jQuery
$(document).ready(function() {
$('.submit-response').click(function() {
var $newMessage = $('textarea[name=text-response]').val()
$('#message-feed').append($newMessage, 'message', 'bubble', 'user');
});
});

2 problems over there :
1/ You're not preventing the event default behavior. That means whenever you're clicking on the button which is a submit input, it will send a POST request. So the page will change. To prevent this :
$('.submit-response').click(function() {
var $newMessage = $('textarea[name=text-response]').val();
$('#message-feed').append($newMessage, 'message', 'bubble', 'user');
});
should become :
$('.submit-response').click(function(event) {
event.preventDefault(event);
var $newMessage = $('textarea[name=text-response]').val();
$('#message-feed').append($newMessage, 'message', 'bubble', 'user');
});
2/ You're not actually adding the classes. $.append appends elements, not classes. So :
$('.submit-response').click(function(event) {
event.preventDefault(event);
var $newMessage = $('textarea[name=text-response]').val()
$('#message-feed').append($newMessage, 'message', 'bubble', 'user');
});
should become :
$('.submit-response').click(function(event) {
event.preventDefault(event);
var $newMessageText = $('textarea[name=text-response]').val(),
$newMessage = $('<span class="message bubble user">' + $newMessageText + '</span>');
$('#message-feed').append($newMessage);
});
Now obviously it doesn't have to be a span, it could be anything else. It still has to be an element.
Also, this is only resolving the issues you had on the front end. You'll need AJAX to send the POST to the server side and get the data without refreshing/leaving the page. But that's another topic.

toggleClass and slideToggle bug

The main question I have concerns toggleClass(). Since I'm not the greatest with jQuery, I'm not sure what to search for. Here is my code:
JS
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery('.quickLinks').click(function() {
var options = {direction: 'right'};
var duration = 400;
jQuery('#quickLinks').slideToggle(options, duration);
jQuery('.quickLinks').toggleClass('sidebar-blue');
});
jQuery('.quickLinks').hover(function() {
jQuery(this).css({
'border-top-color': '#1C8BE6',
'color': '#1C8BE6'
});
}, function() {
jQuery(this).css({
'border-top-color': '#003663',
'color': '#fff'
});
});
});
CSS
/** Style for the button & div **/
.sidebar {
position: fixed;
bottom: 0;
z-index: 100;
width: 100%;
display: block;
}
.quickLinks, #quickLinks {
float: right;
margin-left: 100%;
width: 230px;
}
.quickLinks {
cursor: pointer;
padding: 10px 0px 5px;
background-color: #003663;
white-space: nowrap;
text-align: center;
font-family: 'Just Another Hand', Arial, Helvetica, sans-serif;
font-weight: 400;
font-size: 26px;
line-height: 26px;
color: #fff;
border-top: 3px solid #003663;
border-radius: 5px 5px 0px 0px;
}
.quickLinks.sidebar-blue {
line-height: 20px;
color: #1C8BE6 !important;
border-top: 3px solid #1C8BE6 !important;
}
#quickLinks {
position: relative;
display: none;
background-color: #003663;
right: 0px;
z-index: 100;
}
#quickLinks > ul {
list-style-type: none;
float: right;
margin: 5px 10px;
padding-left: 0px;
}
#quickLinks > ul > a > li {
color: #fff;
white-space: nowrap;
}
#quickLinks > ul > a > li:hover {
color: #1C8BE6;
}
When I expand the menu, the head text is blue. After clicking it again to slide down the menu, the "Quick Links" text remains blue until you move the mouse. I'd like it to change either right when it's clicked again or once the sliding transition is complete.
The other question I have is whenever clicking the second time, the menu jumps. It goes up a few pixels before returning down. It doesn't happen on the actual site I'm using this for, but it does in jsfiddle. I'd just like to know why.
Here's where I'm at so far :
Fiddle

Multiple dropdown menus - one Jquery code

I am hoping to create a form with multiple dropdown selection menus.
I'm pretty new at JQuery and was hoping someone could help me to figure out my problem.
I'm trying to figure out how to get each list to function individually, without having to duplicate the JQuery code. Is this possible? Here is my current codepen : http://codepen.io/kelseyhisek/pen/HbGDm
<h1>Dead Simple Dropmenu</h1>
<div class="ds_select">
<div class="ds_label ds_placeholder">Select me...</div>
<ul class="ds_list">
<li>What?</li>
<li>It's</li>
<li>That</li>
<li>Easy?</li>
</ul>
</div>
<div class="ds_select">
<div class="ds_label ds_placeholder">Select me...</div>
<ul class="ds_list">
<li>What?</li>
<li>It's</li>
<li>That</li>
<li>Easy?</li>
</ul>
</div>
#import url(http://fonts.googleapis.com/css?family=Lato:300,700);
body{
text-align:center;
font-family:Lato;
color:#999
}
.ds_select,
.ds_select *
{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.ds_placeholder{
padding:15px 18px;
position:relative;
height:50px;
z-index:2;
}
.ds_select
{
display: inline-block;
position: relative;
line-height: 1;
width: 200px;
max-height:50px;
padding: 0px;
border: 3px solid #5e5e5e;
background: #ffffff;
color: #444444;
font-size: 11px;
font-weight: 700;
text-align: left;
text-transform: uppercase;
outline: 0;
overflow:hidden;
cursor: pointer;
transition:all 0.3s
}
.ds_select:before,
.ds_select:after
{
content: "\25B2";
position: absolute;
right: 10px;
top: 12px;
font-size: 7px;
}
.ds_select:after
{
content: "\25BC";
top: 20px;
}
.ds_select:hover,
.ds_select.open{ border-color: #000000; }
.ds_select.open{max-height:600px }
.ds_select .ds_label
{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.ds_select .ds_list
{
margin-top: -30px;
opacity:0;
width: inherit;
z-index: 1;
padding: 0;
transition:all 0.2s
}
.ds_select.open .ds_list { opacity:1;
margin-top: 0px;}
.ds_select .ds_list li a
{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display:block;
position: relative;
padding: 10px 10px;
list-style-type: none;
color:#999;
text-decoration:none
}
.ds_select li a:hover
{
background: #eee;
color: #000;
}
$('.ds_placeholder').on('click',function(e){
e.preventDefault();
if($('.ds_select').hasClass('open'))
$('.ds_select').removeClass('open');
else
$('.ds_select').addClass('open');
});
//Or just remove this and go to link
$('.ds_list a').on('click',function(e){
e.preventDefault();
$('.ds_placeholder').text($(this).text());
$('.ds_select').removeClass('open');
});

Ah, so the problem is that inside your click handlers your selecting ".ds_select" which is looking globally for all divs with the class .ds_select. It then adds the open class to all of them. I think what you want is this inside your click handler:
$('.ds_placeholder').on('click',function(e){
e.preventDefault();
var $dropdown = $(this).parents('.ds_select');
$dropdown.toggleClass('open');
});
By the same token you'll want to update the placeholder like this:
$('.ds_list a').on('click',function(e){
e.preventDefault();
var $dropdown = $(this).parents('.ds_select');
var $placeholder = $dropdown.find(".ds_placeholder");
$placeholder.text($(this).text());
$dropdown.removeClass('open');
});
Looks like there's also an issue with the dropdown pushing the other dropdown to the bottom;
I think you could fix that by adding vertical-align: top; to your ds_select class, but I'm not so hot with CSS. So maybe somebody else will chime in.
Update used toggleClass for simplicity hat-tip Steve Sanders