I am using rails to make a search request.
The search form's action is a certain path "/results/foo" .. which hits a controller that does some validation of input and then redirects to "results/foobar" if search-text was clean.
<h1 class="center"><progress style="font-size: 160%;">Loading...</progress></h1>
I'd like to show the above html.. and only the above html (either in a view or via jquery) until "results/foobar" has fully loaded.
Is there a way to show such a progress bar animation (html) until final page has completed loading?
More Details (The search bar page has code like this):
<form class="form-search" action="/s_results/iscan" method="POST">
<div class="input-append">
<input name="searchtext" type="text" class="span4 search-query" placeholder="Type number here...">
<button type="submit" class="btn">
<i class="icon-search"></i>
Search
</button>
</div>
</form>
What you do in such cases is keep a full window occupying div over your content while your data loads in the background http://jsfiddle.net/basarat/qfrJE/:
.busyPanel {
/* absolute position all over */
position: absolute;
top: 1px;
bottom: 1px;
left: 1px;
right: 1px;
/* Remove any defaults */
border: none;
margin: 0;
padding: 0;
/* Make sure it stays on top */
z-index: 2500;
/* any image */
background: grey;
/* initial visibility */
display: visible;
}
And then remove it when you are done loading:
$(".busyPanel").fadeOut('slow');
Your best bet is to use some JS on click of the link that of entry of the form that shows your div then it'll be on the screen while your request processes, once the search is complete and your new page is rendered it'll be gone.
-- html
<div class="progress">Loading...</div>
-- css
.progress { display: none; }
-- js
$('#search').click(function() {
$('.progress').show();
window.location.href = 'foo';
});
See the JSFiddle, Simple and easy.
Related
im trying to make a dialog such that while it is visible, it prevents access to page content. if i click accept the dialog should disappear is never re-presented on subsequent visits. if a disagree it should redirection to another site, and continually represent the dialog on next visits, im having a lot of trouble with this i have the outline done but im having trouble to implement its functions.
this is what i have done
<!DOCTYPE html>
<body>
<div id= Cooky>
<h2>Warning</h2>
<p>site-usage requires the user’s acceptance of cookie usage before progressing.</p>
<button id="button" onclick="toggleDiv('Cooky');">agree</button>
<button id="button" onclick="toggleDiv('Cooky');">diagree</button>
</div>
<div>
this is the rest of the wesbite<br>
this is the rest of the wesbite<br>
this is the rest of the wesbite<br>
</div>
</body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
function toggleDiv(divId) {
$("#"+divId).toggle();
}
</script>
the rest of the code is on jsfiddle: https://jsfiddle.net/a02ma3x5/
please have a look
thanks for your help in advance
You can try with overlay, see jsfiddle
<div class="overlay active">
.overlay.active {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.8;
filter: alpha(opacity=80);
z-index:1;
}
$('.overlay').toggleClass('active');
I have created a chatroom which elements are li. I want it to always stick to the bottom. It works fine when number of chats are like 10-20 but after that it stops halfway. I think there is something wrong with the height but I can't figure it out here is my html :
<div id="chat-main">
<ul id="chat-list">
//I dynamically add <li>s using ajax
</ul>
</div>
<div id="message-panel">
<form class="form-inline" id="messageForm">
<input id="message-value" type="text" autocomplete="off" maxlength="510" placeholder="Type your message...">
</form>
</div>
Here is my css:
#chat-main {
height: 84%;
border: 2px solid #d8d7cf;
}
#chat-list {
height: 100%;
overflow-y: scroll;
}
#chat-main>ul {
padding-left: 10px;
list-style-type: none;
}
And this is the jquery code for scrolling:
$("#chat-list").animate({ scrollTop: $(document).height() }, "slow")
I'm really stuck and don't know what is wrong.
Edit: here is my jsfiddle sorry for the chat objects I inserted alot so you can see what happens :
http://jsfiddle.net/L8msx/19/
Using document height doesn't seem logical, this will get the exact overflow of the chat :
http://jsfiddle.net/1yLzkgw8/
var chat = $("#chat-list"),
overflow = chat[0].scrollHeight-chat.height();
chat.animate({scrollTop: overflow}, 'slow');
When getting scrollHeight, plain JS is used so the DOM node itself is retrieved with [0].
I have a menu bar. Now as per my need I have to open a login form as soon as menu bar menu is clicked. I have seen opening a jQuery dialog box with screen lock as soon as the URL is clicked and if the user has provided the correct Username and Password he will navigate to the required page else dialog box in screen Lock will say "Please Enter Correct Username and Password".
Here is my menu bar link code in HTML.
<div>
<ul>
<li>ExtensionWise</li>
<li>Call Type</li>
</ul>
</div>
What you are trying to get is called as modal behaviour where a dialog disables all other elements on the page from being interacted. There are many ui-plugins out there for this but you can also create your own custom div to act in a modal dialog type of behaviour using jQuery and CSS.
html
<div id="box" align="center"></div>
<form>User Name:
<input type="text" name="firstname" />
<br/>Password:
<input type="password" name="pwd" />
<input type="submit" />
<button type="button" id="cancel">Cancel</button>
</form>
<a id="login" href="#">Click to Login</a><br/>
<a id="alert" href="#">Click To Alert before and after opening form</a>
script
$(document).ready(function(){
$('#alert').click(function(){alert('alert')})
$('a#login').click(function(){
$("#box,form").fadeIn('slow');
})
$('#cancel').click(function(){
$('#box,form').hide();
})
})
css
div {
width: 100%;
height: 100%;
display:none;
position: absolute;
z-index:100;
background: lightgreen;
opacity: 0.6;
}
form{
position: absolute;
z-index: 101;
display:none;
width: 200px;
border: 2px solid red;
margin-top:50px;
margin-left: 200px;
background: cornflowerblue;
}
Note:- you must put the div and form always as the topmost element in the body
Click here for DEMO
When I have a file upload field,
<form action="" method="post" enctype="multipart/form-data">
<input id="image" type="file" name="image">
</form>
http://jsfiddle.net/jakeaustin5574/6DzgU/
It automatically creates a text "No file chosen" and a "Browse" button.
I want to change or remove this "No file chosen" text.
Is there anyway to achieve this in css or Javascript?
Thanks
You can apply css rules like...
input[type=file]{
color:transparent;
}
First of all. You have to hide your input:
input#image{position:fixed;top:-100px;}
Secondly, you have to create alternative button with your skin:
<form action="" method="post" enctype="multipart/form-data">
<input id="image" type="file" name="image">
<button id="image_alt">Select image</button>
</form>
and the last step is to create a javascript script which link alternative button with original one:
document.getElementById('image_alt').addEventListener('click',function(){
document.getElementById('image').click();
});
Example Fiddle
You can set the value of the image input to "" using jQuery to remove the selected file:
$("#image").val("")
See this fiddle:
http://jsfiddle.net/nfvR9/1/
NOTE: This is dependent on browser used. It's works in FF 22 and Chrome 29.
I am sure you cannot change the default labels on buttons, they are hard-coded in browsers (each browser rendering the buttons captions its own way). check this styling article
HTML:
<div class="inputWrapper">
<input class="fileInput" type="file" name="file1"/>
</div>
CSS:
.inputWrapper {
height: 32px;
width: 64px;
overflow: hidden;
position: relative;
cursor: pointer;
/*Using a background color, but you can use a background image to represent a button*/
background-color: #DDF;
}
.fileInput {
cursor: pointer;
height: 100%;
position:absolute;
top: 0;
right: 0;
z-index: 99;
/*This makes the button huge. If you want a bigger button, increase the font size*/
font-size:50px;
/*Opacity settings for all browsers*/
opacity: 0;
-moz-opacity: 0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0)
}
take a look of this fiddle:
its working for your needs.
FIDDLE - DEMO
this demo its a reference of this:
stackoverflow question LINK
From the autor:ampersandre
<div style="position:relative;display:inline-block;left:-4px;bottom:-6px;width:16px;height: 24px;overflow:hidden;">
<img src="http://maps.google.com/mapfiles/ms/micons/blue-dot.png" alt="" title="Add Attachment" style="height:24px;width:24px; position: relative;top: 1px; left: -3px;"/>
<input type="file" id="fileupload" name="upload" style=" opacity: 0;font-size: 50px;width:16px; filter:alpha(opacity: 0); position: relative; top: -25px; left: -1px" />
</div>
JQuery:
function getFileName() {
var varfile = $('#fileupload').val().replace(/.*(\/|\\)/, '');
$("#filename").text(varfile);
}
$("#fileupload").on('change', function() {
getFileName();
});
Demo:
http://jsfiddle.net/m44fp2yd/
$(function () {
$('input[type="file"]').change(function () {
if ($(this).val() != "") {
$(this).css('color', '#333');
}else{
$(this).css('color', 'transparent');
}
});
})
input[type="file"]{
color: transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" name="app_cvupload" class="fullwidth input rqd">
The No file chosen text is entirely dependent on the browsers rendering engine - I assume you use Chrome. If Firefox you'll see No file selected and in IE you'll get a greyed out textbox with no value at all. This cannot be changed.
The alternative is to use a plugin (such as this) which gives you complete control over the styling of the file control.
It's up to the browser to render the file upload box. Each one does this in your own way. For example, in my chrome I can see the No file chosen text. Someone using Firefox might see something else entirely. There is no direct way to control this rendering process.
However, there are some hacks which can be used. For details, check out this link.
this text show by browser different browser show different message
chrome show=no file choosen
mozilla show=no file selected
and same as ie
This is on my plugin page on Git and I have two interactive demo in the web page. In one of the demo page, I have a small dialog that opens when you click on a div.
The weird issue is that this dialog is getting opened when I click on the top title that says attrchange beta . This happens only if the first click is on the title attrchange beta, clicking any other element in page fixes this issue.
The plugin page http://meetselva.github.io/attrchange/ [Fixed, use the below URL to see the problem]
http://meetselva.github.io/attrchange/index_so_issue.html
Below is the code,
<!-- The title -->
<h1 id="project_title">attrchange <span class="beta" style="text-decoration: line-through;" title="Almost there...">beta</span></h1>
<!-- Main dialog that has link to the sub-dialog -->
<div id="attributeChanger">
<h4 class="title">Attribute Changer</h4>
<p>Listed below are the attributes of the div:</p>
<div class="attrList"></div>
<div class="addAttribute text-right">add new attribute</div>
</div>
<!-- Sub-dialog -->
<div id="addOrmodifyAttr" title="Add/Modify Attribute">
<h4 class="title">Add/Modify Attribute</h4>
<p><b>Attr Name</b> <input type="text" class="float-right attrName"></p>
<p><b>Attr Value</b> <input type="text" class="float-right attrValue"/></p>
<div class="clear"> </div>
<button type="button" class="float-right close">Close</button>
<button type="button" class="float-right update">Update</button>
<div class="clear"></div>
</div>
JS:
var $attributeChanger = $('#attributeChanger');
var $attrName = $('.attrName', '#addOrmodifyAttr'),
$attrValue = $('.attrValue', '#addOrmodifyAttr'),
$attrAMUpdate = $('.update', '#addOrmodifyAttr');
//Handler to open the sub-dialog
$attributeChanger.on('click', '.addAttribute', function () {
$attrName.val('').removeClass('nbnbg');
$attrValue.val('');
$('#addOrmodifyAttr, #overlay').show();
});
The problem is the CSS applied to your #attributeChanger div.
If you look at the CSS applied to it:
#attributeChanger {
background-color: #FEFFFF;
border: 1px solid #4169E1;
color: #574353;
font-size: 0.9em;
margin: 10px;
min-height: 50px;
min-width: 150px;
opacity: 0;
padding: 2px;
position: absolute;
top: -200px;
z-index: 1;
}
You'll notice that the position is absolute, and it's positioned over your logo. So what you're clicking is actually your #attributeChanger div.
To fix it, you can hide #attributeChanger using display: none;, then use $('#attributeChanger').show(); in jQuery when it comes into actual view.
The pop up is showing because this code is running:
}).on('click', '.addAttribute', function () {
$attrName.val('').removeClass('nbnbg');
$attrValue.val('');
$('#addOrmodifyAttr, #overlay').show();
This is because the DIV with the class addAttribute is over the title DIV.
You can either move the 'addAttribute' DIV, or remove the last line of that onclick function.
That is because you element is hover your title and detect the click on himself and open(i don't know why it open, i didnt examine your entire code). But when you click anywhere else, your code is changing his position so it is not over the title.
The easiest fix is to change you #attributeChanger CSS top to -100px (that's the value when you click on the document) OR add a display : none.
EDIT : Axel answer show what I mean by "element is hover your title".