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>
Related
I have implemented a navigation bar within the site that I am trying to create, however, the only time all the dropdown options of the nav bar appear is when it's at the top of the page. Once I scroll down the page, the options become hidden behind one another. (If you look at the Profile button in particular, you can see a button behind the other due to the :hover being a different color.)
I've messed around a bit in the CSS with overflow and positioning. Making overflow show vs overflow hidden. I've removed the nav bar from the header to see if that was an issue, as well as remove the header from the HTML all together to see if there was an issue there.
p {
padding: 13px;
text-align: justify;
}
.nav {
position: fixed;
width: 100%;
top: 0;
}
.nav a {
position: fixed;
background-color: #333;
z-index: 9999;
overflow: show;
}
.nav a.home-btn {
position: relative;
}
.nav a.logout-btn {
position: relative;
}
#head1 {
text-align: center;
background-color: black;
color: white;
font-family: sans-serif;
text-decoration: none;
font-size: 30px;
padding: 10px 14px;
}
* {
margin: 0;
padding: 0;
font-family: sans-serif;
list-style: none;
text-decoration: none;
z-index: 9999;
}
.navbar {
overflow: hidden;
background-color: #333;
font-family: sans-serif;
z-index: 9999;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.profile-dropdown {
float: left;
overflow: hidden;
}
.profile-dropdown .profile-btn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.profile-content {
display: none;
position: absolute;
background-color: #333;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.profile-content a {
float: none;
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.profile-content a:hover {
background-color: gray;
}
.profile-dropdown:hover .profile-content {
display: block;
}
.search-dropdown {
float: left;
overflow: hidden;
}
.search-dropdown .search-btn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.search-btn:hover,
.profile-btn:hover,
.home-btn:hover,
.logout-btn:hover {
background-color: #2ecc71;
}
.navbar a.logout-btn {
float: right;
}
.search-content {
display: none;
position: absolute;
background-color: #333;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.search-content a {
float: none;
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.search-content a:hover {
background-color: gray;
}
.search-dropdown:hover .search-content {
display: block;
}
.listings-dropdown {
float: left;
overflow: hidden;
}
.listings-dropdown .listings-btn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.listings-content {
display: none;
position: absolute;
background-color: #333;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.listings-content a {
float: none;
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.listings-content a:hover {
background-color: gray;
}
.listings-dropdown:hover .listings-content {
display: block;
}
.listings-btn:hover {
background-color: #2ecc71;
}
.messages-dropdown {
float: left;
overflow: hidden;
}
.messages-dropdown .messages-btn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.messages-content {
display: none;
position: absolute;
background-color: #333;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.messages-content a {
float: none;
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.messages-content a:hover {
background-color: gray;
}
.messages-dropdown:hover .messages-content {
display: block;
}
.messages-btn:hover {
background-color: #2ecc71;
}
.settings-dropdown {
float: left;
overflow: hidden;
}
.settings-dropdown .settings-btn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.settings-content {
display: none;
position: absolute;
background-color: #333;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.settings-content a {
float: none;
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.settings-content a:hover {
background-color: gray;
}
.settings-dropdown:hover .settings-content {
display: block;
}
.settings-btn:hover {
background-color: #2ecc71;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
<html>
<link rel="stylesheet" href="../css/searchLost.css" />
<link rel="stylesheet" href="https://cdnjs.cloudfare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<body>
<div class="header">
<h1 id="head1">Lost And Found</h1>
</div>
<div class="navbar">
Home
<div class="profile-dropdown">
<button class="profile-btn">Profile<i class="fa fa-caret-down"></i></button>
<div class="profile-content">
Your Listings
Update Info
</div>
</div>
<div class="search-dropdown">
<button class="search-btn">Search<i class="fa fa-caret-down"></i></button>
<div class="search-content">
Search Lost
Search Found
</div>
</div>
<div class="listings-dropdown">
<button class="listings-btn">Listings<i class="fa fa-caret-down"></i></button>
<div class="listings-content">
Report Lost
Report Found
</div>
</div>
<div class="messages-dropdown">
<button class="messages-btn">Messages<i class="fa fa-caret-down"></i></button>
<div class="messages-content">
New
Sent
Deleted
</div>
</div>
<div class="settings-dropdown">
<button class="settings-btn">Settings<i class="fa fa-caret-down"></i></button>
<div class="settings-content">
Change Password
</div>
</div>
Logout
</div>
<script type="text/javascript">
var nav = document.getElementsByClassName('navbar');
window.onscroll = function sticky() {
if (window.pageYOffset > nav[0].offsetTop) {
nav[0].classList.add('nav');
} else {
nav[0].classList.remove('nav');
}
};
</script>
<p>
Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the
page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out
the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page. Sample text to fill out the page.
</p>
</body>
</html>
What I want to happen is for the nav bar to show all drop down options regardless of the positioning of the nav bar, whether it be on top of the page scrolled all the way to the top, or on the top when scrolled down.
You are using a different css class for each of your drop downs, this will be challenging for you to work with and challenging for others to help you with. I fixed the Profile dropdown, the rest is up to you. Take it as a learning opportunity. You should use the same css class for all of the dropdowns, there isn't anything different enough about any of them to warrant having a class to just a given dropdown.
Also, next time you submit your code, us a jsfiddle
https://jsfiddle.net/3qwy26rp/22/
.profile-content {
display: none;
position: fixed;
background-color: #333;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.profile-content a {
float: none;
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
position: relative;
}
In dropdown memu need to use position:fixed and in the <a> tag need to use position:relative here is the jsfiddle link https://jsfiddle.net/0scmow82/16/. Hope this will be helpful for you
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
I'm trying to use jQuery to fade out elements in a scrolling div (not the main window) as they scroll out of view. I'm using the fadeTo function and checking for the position of the element as the user scrolls.
See this stackoverflow thread for what I'm basing my code on.
Everything seems to work fine on my non-retina monitor (using Chrome). The top element is fading out right at the top of the scrolling div like its supposed to.
However, when I perform the same actions using my macbook pro w/ retina display, I get weird behavior. For some of the elements (not all) in the scrolling div, The fadeTo animation only fades a part of the div (the bottom part). The top half (or more sometimes) is unchanged.
EDIT: WAS ABLE TO MAKE A DEMO (Try viewing demo on monitor vs. retina screen).
Any idea why this would happen? Why would this behave differently on my retina screen than on my monitor (both using same version of Chrome)?
I should also mention that all of this html is being injected into existing web pages, so that the scroll div sits on top of the page in the top right corner (fixed position). I'm building a chrome extension... My code:
$('#volleyThreadDiv' + objectId).scroll(function() {
console.log('userDidscroll...');
$('.volleyComment').each(function () {
var height = $(this).css('height');
var heightNumeric = height.substring(0, height.length - 2);
heightNumeric = Number(heightNumeric);
if ($(this).position().top + heightNumeric < 130) {
$(this).stop().fadeTo(0, 0.2);
} else {
$(this).stop().fadeTo(0, 100);
}
});
$('.volleyReply').each(function () {
var height = $(this).css('height');
var heightNumeric = height.substring(0, height.length - 2);
heightNumeric = Number(heightNumeric);
if ($(this).position().top + heightNumeric < 130) {
$(this).stop().fadeTo(0, 0.2);
} else {
$(this).stop().fadeTo(0, 100);
}
});
});
#volleyDiv {
position:fixed;
top: 20px;
right: 30px;
padding: 10px;
z-index: 999999999999999999999999999;
box-sizing: initial;
background: none;
border: none;
}
.volleyThreadDiv, #volleyActivityDiv {
position: static;
display: none;
max-height: 300px;
overflow-y: scroll;
background: none;
border: none;
}
.volleyThreadDiv::-webkit-scrollbar, #volleyActivityDiv::-webkit-scrollbar {
background-color: transparent;
}
.volleyComment, .volleyReply {
margin: 5px 5px 5px 5px;
padding: 5px;
border: 2px solid #63c5e2; /* blue border */
border-radius: 8px;
width: 155px;
background: white;
box-shadow: 0px 2px 1px #888888, -2px 2px 1px #888888;
box-sizing: initial;
}
.volleyCommentStatus, .volleyReplyStatus {
padding: 0px 5px 0px 5px;
margin: 0px 0px 0px 0px;
font-family: 'Avenir Next', Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #262626;
line-height: 1.5;
word-wrap: break-word;
}
.volleyCommentStatus, .volleyReplyStatus {
text-align: left;
}
.volleyCommentStatus > a:link, .volleyReplyStatus > a:link, .volleyCommentStatus > a:visited, .volleyReplyStatus > a:visited {
font-family: 'Avenir Next', Helvetica, sans-serif;
font-weight: normal;
color: #63c5e2 !important;
text-decoration: none !important;
border: none;
padding: none;
margin: none;
background-color: white !important;
}
.volleyCommentStatus > a:hover, .volleyReplyStatus > a:hover {
font-family: 'Avenir Next', Helvetica, sans-serif;
font-weight: normal;
color: gray !important;
text-decoration: none !important;
border: none;
padding: none;
margin: none;
background-color: white !important;
}
.volleyCommentAuthor, .volleyReplyAuthor, .volleyCommentDate, .volleyReplyDate {
font-family: 'Avenir Next', Helvetica, sans-serif;
font-style: italic;
font-size: 10px;
font-weight: normal;
color: gray;
margin: 0px 5px 0px 0px;
line-height: 1.5;
}
.volleyReplyAuthor {
clear: both;
text-align: left;
padding: 0px 5px 0px 5px;
}
.volleyCommentAuthor {
clear: both;
text-align: left;
padding: 0px 5px 0px 5px;
}
.volleyCommentDate, .volleyReplyDate {
float: right;
margin: 0px 5px 0px 7px;
}
.volleyCommentReply {
float: right;
border: 2px solid #63c5e2; /* blue border */
border-radius: 8px;
background: #63c5e2;
padding: 2px 10px 2px 10px;
margin: 0px 0px 100px 0px;
font-family: 'Avenir Next', Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: white;
box-shadow: 0px 2px 1px #888888, -2px 2px 1px #888888;
box-sizing: initial;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<div id="volleyDiv" style="display: block;">
<div class="volleyThreadDiv" id="volleyThreadDivUAuCOyQuav" style="display: block;">
<div class="volleyComment" id="volleyCommentUAuCOyQuav">
<p class="volleyCommentDate">Feb 28th</p>
<p class="volleyCommentStatus">First comment!</p>
<p class="volleyCommentAuthor">John Wexler</p>
</div>
<div class="volleyReply" id="volleyReply0wblbTaP1R">
<p class="volleyReplyDate">Feb 28th</p>
<p class="volleyReplyStatus">First comment!</p>
<p class="volleyReplyAuthor">John Wexler</p>
</div>
<div class="volleyReply" id="volleyReplywBS0WFoUDH">
<p class="volleyReplyDate">Feb 28th</p>
<p class="volleyReplyStatus">Testing two comments on a a page.</p>
<p class="volleyReplyAuthor">John Wexler</p>
</div>
<div class="volleyReply" id="volleyReply5zw2ww9GBo">
<p class="volleyReplyDate">Feb 28th</p>
<p class="volleyReplyStatus">Will it blend?</p>
<p class="volleyReplyAuthor">John Wexler</p>
</div>
<div class="volleyReply" id="volleyReplythWrBLrkjy">
<p class="volleyReplyDate">Feb 28th</p>
<p class="volleyReplyStatus">Stay with me.</p>
<p class="volleyReplyAuthor">John Wexler</p>
</div>
<div class="volleyCommentReply" id="volleyCommentReplyUAuCOyQuav">Reply</div>
</div>
</div>
</body>
</html>
The solution I found was to add position: relative in the css for .volleyCommentStatus, .volleyReplyStatus.
It seems it was inheriting position: static which I assume was causing the retina screen problem.
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;
}
Im using jQuery tagit..
In the right corner there is a little close button, to delete the tags.
My question now is, IS there a possible way to delete the tags just på clicking them instead?
First, to remove 'x' from a close element: go to 487. line of tagit.js, and remove x, like this:
+ '<div class="tagit-label">' + newTag.label + '</div>' + '<a class="tagit-close"> </a></li>');
Then, in css file of theme you are using, modify tagit-close class:
For simple blue theme, e.g. tagit-simple-blue.css:
ul.tagit li.tagit-choice a.tagit-close {
/* color: #777777;
cursor: pointer;
font-size: 12px;
font-weight: bold;
outline: medium none;
padding: 2px 0 2px 3px;
text-decoration: none;
top: 0;
right: 3px;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.7);*/
width:100%;
height:100%;
top:0;
left:0;
cursor: pointer;
position: absolute;
display: block;
}