I have the following lines of html code in jquery mobile header to display time. It is static now as it refreshes only when page is refreshed. How I can periodically update the time without page refresh ?
<div id="updateTime">
<span>#DateTime.Now.ToShortDateString()</span><br />
#{
CultureInfo ci = new CultureInfo("en-US");
string formatedDate = DateTime.Now.ToString("t", ci);
}
</div>
I've used jClock in previous project and it's always worked well:
https://github.com/dsparling/jclock
After installing the plugin js file you can call it like this:
$(document).ready(function () {
$('.jclock').jclock({format: '%I:%M:%S %p'});
});
Sample Styling:
.jclock
{
background-color:Navy; color: #ffffff;
font-weight: bold;
font-size: 64pt;
text-align: center;
height: 100px;
text-shadow: 2px 2px 2px #fff;
border-radius: 15px 15px 0px 0px;
-moz-border-radius: 15px 15px 0px 0px;
-webkit-border-radius: 15px 15px 0px 0px;
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: black;
}
Related
I have a long code which I want to use on multiple random pages of my website. Copying and pasting it everywhere is a tough job for me. So, I want to assign a value to it using javascript. If I use that value, entire code should be executed. I tried to use document.getElementById and tried to insert the entire code in innerHTML which didn't work out. Here's the code which I want to assign the value for.
<style>
.container {
height: 40px;
border: 1px solid black;
width: 250px;
padding: 5px;
font-size: xx-small;
white-space: nowrap;
border-radius: 50px;
background: #e6e7ee;
box-shadow: inset 5px 5px 10px #a3a3a3, inset -5px -5px 10px #dddddd;
}
img {
margin-right: 5px;
border-radius: 50px;
box-shadow: 5px 5px 10px #a3a3a3, -5px -5px 10px #dddddd;
border: 1px solid silver;
}
</style>
<div class="container">
<img border="0" align="left" data-original-height="884" data-original-width="800" height="40px" src="https://1.bp.blogspot.com/-GbF0Uslf3Uo/XyEjbgr6hCI/AAAAAAAADFg/dziRURov-J0QMftcWgx5N_lEpIP7jjMGgCPcBGAYYCw/s320/Screenshot_2020-07-25-23-27-02-1.png" width="40px" />
- Becky Lynch<br />
- Wrestler<br />
- WWE
</div>
If I type <div id="becky"></div> on any page, The above code should be executed. Is there any option available?
I recently used DoodleNerd's CSS Textbox Generator (http://doodlenerd.com/html-control/css-textbox-generator) to make a really sleek looking textbox for my website. I'm familiar with extracting text from forms; I've done it in two main forms:
document.getElementById('field').value
or
driver.findElement(By.id("field")).getCssValue("value")
For some reason, when I use DoodleNerd's textboxes, the values in the box aren't extracted... it's really odd.. I'll include my css and html for reference:
#field {
position: absolute;
left: 33px;
top: 170px;
overflow: visible;
width: 129px;
white-space: nowrap;
text-align: left;
font-family: Comic Sans MS;
font-style: normal;
font-weight: normal;
font-size: 20px;
color: rgba(249,249,249);
}
.field {
padding: 0px;
font-size: 15px;
border-width: 5px;
border-color: #CCCCCC;
background-color: #ba6fc5;
color: #f9f9f9;
border-style: inset;
border-radius: 5px;
box-shadow: 4px 2px 5px rgba(66,66,66,.75);
text-shadow: 49px -11px 5px rgba(177,37,37,.0);
}
.field:focus {
outline:none;
}
<div id="field">
<input type="text" value="e.g. '999'" class="field" />
</div>
Thanks a million!
It appears like the value you want is: e.g '999' correct? If so, this should be your JavaScript:
var fieldValue = document.querySelector('.field').value;
It appears like the value you want has the class of field, not the id of field.
If you must use document.getElementById(), you could also do this:
var field = document.getElementById('field');
var value = field.firstElementChild.value;
But I think the first way is probably better.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I am having a link on the website which says "USE CURRENT LOCATION". I want to change that link to a shape of button.
ID of the button is btnGeolocation
You can have a look at that link in this page https://order.subway.com/Stores/Find.aspx?pid=1#pg1
Html for button
button
and css
.link{
text-decoration:none
font-family: "Lato", sans-serif;
font-size: 18px;
font-weight: normal;
}
.link:hover{
text-decoration:none;
padding: 10px 25px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
border: none;
outline: none;
position: relative;
text-align: center;
text-decoration: none;
color: #fff; }
.link:hover {
box-shadow: 0 4px 0 0 #f9b980, 0 2px 0 0px #f9b980;
background-color: #fc983f; }
.visual-button:active {
top: 5px;
box-shadow: 0 0px 0 0px #f9b980, 0 0px 0px 0px #f9b980; }
add this to your stylesheet! it should work... edit the css to get the shape you want!
#divSearchLocation #btnGeolocation{
border: 1px solid #b5b5b5;
border-radius: 100px;
padding: 8px;
background: #e1e1e1;
box-shadow: inset 0px -18px 25px -18px black;}
No jquery required here. Use CSS border and background property, you will achieve the result.
You can use only CSS to do that,
Check out this link :
https://www.freshdesignweb.com/css3-buttons/
I hope this could help you
I am creating a site seal for my users to put in there websites.
Currently I am able to generate simple html/css link that looks like a button, on click it redirects to my landing page.
<a href="http://www.example.com/seal/1e047f70-948c-4d40-a47f-0a15c59fc243">
<span style="box-shadow: #9AC985 0px 1px 0px 0px inset;
border: 1px solid #3B6E22;
display: inline-block;
cursor: pointer;
color: #FFFFFF;
font-family: Arial;
font-size: 14px;
font-weight: bold;
padding: 8px 16px;
text-decoration: none;
background: linear-gradient(#74AD5A , #68A54B ,#74AD5A);">
MY SITE SEAL
</span>
</a>
Requirement is, instead of opening the link in same tab or new tab. I want it to popup like a modal and show my landing page in the modal window.
Note: My users may or may not have bootstrap jquery or any other library installed, challenge is generated code cannot depend on these libraries, But for sure we can use java-script and/or css along with HTML.
Well, easy, you could create your own modal window like this...
(pure CSS, JS)
var modal = document.getElementById("modal");
modal.onclick = function () {
modal.style.display = "none";
}
var modalIframe = modal.getElementsByTagName("iframe")[0];
modalIframe.onclick = function () {}
function showModal ( url ) {
modalIframe.src = url;
modal.style.display = "block";
}
.linkToModal{
box-shadow: #9AC985 0px 1px 0px 0px inset;
border: 1px solid #3B6E22;
display: inline-block;
cursor: pointer;
color: #FFFFFF;
font-family: Arial;
font-size: 14px;
font-weight: bold;
padding: 8px 16px;
text-decoration: none;
background: linear-gradient(#74AD5A , #68A54B ,#74AD5A);
}
#modal{
display:none;
background:rgba(0, 0, 0, 0.5);
position:absolute;
top:0;bottom:0;left:0;right:0;
}
#modal iframe{
position:absolute;
width: 80%;
height: 80%;
top:0;bottom:0;left:0;right:0;margin: auto;
}
<a class="linkToModal" onclick="showModal('http://www.example.com/seal/1e047f70-948c-4d40-a47f-0a15c59fc243')">MY SITE SEAL</a>
<div id="modal"><iframe src=""></iframe></div>
I am creating an application where i am using divs to show information and and using some jQuery to manipulate them.In my application i want to give box shadow to my div and trying to make a professional look.I have created box shadow to my div but it does not look that professional.I am using this link to prepare my application.
Refence UI
Now i want to create my personal information div exactly same as the Summary div in that application. I am also posting my code what i have done so far in a fiddle
#personalInformation{
font-size: 1em;
border-bottom: 3px solid #98AFC7;
border-top: 3px solid #98AFC7;
border-left: 3px solid #98AFC7;
border-right: 3px solid #98AFC7;
box-shadow: 10px 10px 5px;
line-height: 0;
width: 45%;
}
My sample code
Now can anyone help me to make my div exactly same as that application ?? or if not possible then how to make the box shadow in bottom only?? Somebody please help .
I've created exactly same box with background like that application. Hope it may help you.
html {
font-size: 10px;
}
body {
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 100%;
font-weight: 400;
line-height: 1.42857143;
background-color: #f4f4f4;
color: #404040;
}
.content {
float: left;
width: 870px;
}
.content::after {
content: "";
clear: both;
display: table;
}
.box {
padding: 5px 15px;
background: #fff;
box-shadow: 0 1px 2px #c9c9c9;
-moz-box-shadow: 0 1px 2px #c9c9c9;
-webkit-box-shadow: 0 1px 2px #c9c9c9;
border-radius: 2px;
margin-bottom: 15px;
}
.box:hover {
box-shadow: 0 2px 2px #bababa;
-moz-box-shadow: 0 2px 2px #bababa;
-webkit-box-shadow: 0 2px 2px #bababa;
}
.box h5 {
font-size: 1.4rem;
margin-top: 10px;
margin-bottom: 10px;
line-height: 1.1;
}
.box p {
font-size: 1.4rem;
font-weight: 400;
line-height: 1.5;
margin: 0 0 10px;
}
<div class="content">
<div id="your-id" class="box">
<div class="box-content">
<h5>Caption</h5>
<p id="your-id">Not Mentioned</p>
<h5>Skills/Competencies</h5>
<p id="your-id">Layout ,CSS ,JavaScript ,jQuery ,HTML5 ,WordPress ,Web Design ,Web Development ,HTML ,PHP ,AJAX ,Cross-browser Compatibility ,CSS3 ,UI/UX ,Expert Frontend Developer ,Responsive Web Design ,Website Development ,Web 2.0 ,Dreamweaver ,Web Applications ,Image Manipulation ,Drupal ,MySQL ,Web Application Design ,Web Interface Design ,SVG ,Front-end Development </p>
<h5>Resumes</h5>
<p id="your-id">not mentioned</p>
</div>
</div><!-- .box -->
</div>
I have provided an example here using HAML and SCSS. Please hit the compiled button to retrieve the rendered content. Its a very simple illusion. The background shadow is a soft black color. Let me know if you any more questions
HAML:
#my-box Hello World!
SCSS:
$background: #3D6CAD;
$soft-black-shadow: rgba(0,0,0,0.29);
html, body { width: 100%; height: 100%; background: $background; }
#my-box {
float: none;
height: 50px;
width: 300px;
margin: 0 auto;
margin-top: 50px;
padding-top: 20px;
text-align: center;
background: white;
box-shadow: 0 2px 3px 1px $soft-black-shadow;
}
http://codepen.io/Stephn_R/pen/pJwdzB
And the edits applied to your JSFiddle