Provided below is a snippet from my html and css code, how and what would I need to add in not only html and css, but javascript as well to make this work as a slide in/out in the direction of (right to open) and (left to close) div?
<div id="left">
Edit Profile
Settings
Sign Out
</div>
#left { width: 338px; border-left: 1px solid #333; float: left; }
#left a {
width: 145px;
height: 22px;
padding: 5px 12px;
margin: 0;
border-bottom: 1px solid rgba(204, 204, 204, 0.09);
float: left;
display: inline-block;
position: relative;
top: 34px;
color: #15ADFF;
font: 16px Arial, Helvetica, sans-serif;
font-weight: bold;
font-variant: small-caps;
text-shadow: -1px -1px 1px #000, 2px 2px 3px rgba(110, 110, 110, 0.7);
}
#left a:hover {
width: 138px;
background: rgba(204, 204, 204, 0.4);
border-right: 7px solid #15ADFF;
color: #111;
text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.4);
}
I currently do not have any javascript written up for this as I do not know where to start with it...I am, however, using jquery-1.3.2
EDIT: If anyone can provide a jsfiddle, I'd greatly appreciate it ;)
Related
I am using react-mentions in my project for mentioning users.. The problem is My comment input is at bottom of the page.. The react-mentions show the suggestion when we type # in the bottom of the cursor. I want this list to be above the cursor...Can anyone help me?
I tried Editing the css, but my methods doesn't work.
This is the Css i am using
.mentions {
margin: 1em 0;
}
.mentions--singleLine .mentions__control {
display: inline-block;
/* width: 130px; */
}
.mentions--singleLine .mentions__highlighter {
/* padding: 1px; */
border: 2px inset transparent;
}
.mentions--singleLine .mentions__input {
/* padding: 1px; */
border: 2px inset;
}
.mentions--multiLine .mentions__control {
font-family: monospace;
/* font-size: 14pt; */
}
.mentions--multiLine .mentions__highlighter {
border: 1px solid transparent;
/* padding: 5px; */
/* min-height: 63px; */
}
.mentions--multiLine .mentions__input {
border: 1px solid silver;
/* padding: 9px; */
outline: 0;
}
.mentions__suggestions{
left: 0;
bottom: 100%;
width: 90%;
}
.mentions__suggestions__list {
background-color: white;
border: 1px solid rgba(0, 0, 0, 0.15);
left: 0;
bottom: 100%;
width: 90%;
/* font-size: 10pt; */
}
.mentions__suggestions__item {
padding: 5px 15px;
border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}
.mentions__suggestions__item--focused {
background-color: #cee4e5;
}
.mentions__mention {
position: relative;
z-index: 1;
color: blue;
text-shadow: 1px 1px 1px white, 1px -1px 1px white, -1px 1px 1px white,
-1px -1px 1px white;
text-decoration: underline;
pointer-events: none;
}
This is the js code
<MentionsInput className="mentions" value={newComment} onChange={e => setNewComment(e.target.value)} >
<Mention
trigger="#"
data={tagUserList}
/>
</MentionsInput>
But the output is still like the same..The list is showing below the cursor
Please help me to solve the problem
You can use forceSuggestionsAboveCursor={true}
<MentionsInput
value={value}
onChange={onChange}
style={defaultStyle}
placeholder={"Mention people using '#'"}
suggestionsPortalHost={container}
forceSuggestionsAboveCursor={true}
>
<Mention data={data} onAdd={onAdd} style={defaultMentionStyle} />
</MentionsInput>
There is a demo page that shows how it works.
This code example can be found in their GitHub here
It's the middle one from BottomGuard's section.
You can also use allowSuggestionsAboveCursor={true}, which will use bottom only if there's space.
This question already has answers here:
Checking the referrer
(6 answers)
Closed 6 years ago.
I have a Facebook Like Box inside a Popup div. However, I would like the Facebook Like Box to be displayed ONLY when a user entered the site directly from Facebook.
In short:
User came from Facebook: show
User entered URL directly: do not show
User came from google: do not show
How can I check and validate that facebook is the user referrer? Here is my code:
if (document.cookie.indexOf('_visited=1') == -1) {
var delay_popup = 1000;
setTimeout("document.getElementById('parent_popup').style.display='block'", delay_popup);
var date = new Date;
date.setDate(date.getDate() + 1); // текущая дата + 1 день
document.cookie = '_visited=1; path=/; expires=' + date.toUTCString();
}
#parent_popup {
background-color: rgba(0, 0, 0, 0.8);
display: none;
position: fixed;
z-index: 99999;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#popup {
background: #fff;
width: 380px;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border: 10px solid #ddd;
position: relative;
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#popup h4 {
font: 28px Monotype Corsiva, Arial;
font-weight: bold;
text-align: center;
color: #008000;
text-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
#popup h5 {
font: 24px Monotype Corsiva, Arial;
color: red;
text-align: center;
text-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
.close {
background-color: rgba(0, 0, 0, 0.8);
border: 2px solid #ccc;
height: 24px;
line-height: 24px;
position: absolute;
right: -24px;
cursor: pointer;
font-weight: bold;
text-align: center;
text-decoration: none;
color: rgba(255, 255, 255, 0.9);
font-size: 16px;
text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
top: -24px;
width: 24px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px;
border-radius: 15px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background-color: rgba(0, 122, 200, 0.8);
}
<div id="parent_popup">
<div id="popup">
<font size="2" style="font-size: 15pt;">
<b style="color: rgb(255, 0, 0);"><center>pls like us !</center></b>
</font>
<center>like box code </center>
<p style="text-align: center;">
<strong><a class="button" href=""></a></strong>
</p>
</div>
</div>
You can use JavaScript to detect the referrer and then show an element if the referer URL matches facebook using .match(regex):
var fblike = document.getElementById('fblike');
var ref = document.referrer;
if (ref.match(/^https?:\/\/([^\/]+\.)?facebook\.com(\/|$)/i)) {
fblike.style.display = 'block';
}
#parent_popup {
background-color: rgba(0, 0, 0, 0.8);
position: fixed; z-index: 1;
top: 0; right: 0; bottom: 0; left: 0;
text-align: center;
}
#popup {
background: #fff;
margin: 10% auto;
width:50%;
padding: 5px 20px 13px 20px;
border: 10px solid #ddd;
position: relative;
border-radius: 10px;
}
#fblike {
display: none;
}
<div id="parent_popup">
<div id="popup">
<div id="fblike"><p>Like us on Facebook!</p></div>
</div>
</div>
Notice how #fblike has display:none by default. When user visits from facebook, the div will show up using the pure JavaScript code: document.getElementById('fblike').style.display = 'block';
Referer regex code from: Checking the referrer with JavaScript
Glad to be on Stack Overflow. I'm new to JS /Jquery and can use HTML/CSS and have managed to piece together the following code.
It's for a box with an expand button that upon clicking shows / hides a slider panel under it.
It works on desktop but doesnt not work on smartphones (Tested on iPhone5 with Chrome & Safari up to date versions.
Can you please guide me as to why this is not functioning at all on the mobile?
Thanks
Vila
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
<div id="card_bg">
<p class="hero_text">We love design</p>
<p class="sub_text">We love design</p>
<p class="link showSingle" id="2">EXPAND ></p>
<div class="share_sheet_2 collapse_share"></div>
</div>
#card_bg {
background-position: 50% 100%;
box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 8px -2px;
box-sizing: border-box;
width: auto;
height: auto;
min-width:320px;
position: relative;
text-align: left;
text-rendering: optimizelegibility;
background: rgb(255, 255, 255) linear-gradient(transparent 50%, rgb(255, 255, 255) 50%) repeat-x scroll 50% 100% / 2px 2px padding-box border-box;
border: 0px none rgba(55, 70, 72, 0.8);
border-radius: 2px 2px 2px 2px;
overflow: auto;
outline: rgba(55, 70, 72, 0.8) none 0px;
-webkit-font-smoothing: antialiased;
}
.hero_text {
font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
color: green;
font-weight: bold;
font-size: 55px;
padding-top: 10px;
padding-left: 20px;
padding-right: 20px;
margin: 0px;
letter-spacing: -2px;
-webkit-font-smoothing: antialiased;
}
.sub_text {
font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #535860;
font-size: 18px;
padding-left: 20px;
padding-right: 20px;
padding-top: 0px;
margin-top: -2px;
-webkit-font-smoothing: antialiased;
}
.link {
font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #535860;
font-size: 16px;
padding-left: 20px;
padding-right: 10px;
padding-top: 16px;
padding-bottom: 8px;
line-height: 0px;
margin-top: 0px;
float: left;
-webkit-font-smoothing: antialiased;
}
.link:hover {
color: green;
}
.collapse_share {
position: relative;
margin-top: 60px;
display: none;
height:54px;
background-color: green;
clear: both;
text-align: center;
-webkit-box-shadow: inset 0px 8px 9px -5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: inset 0px 8px 9px -5px rgba(0, 0, 0, 0.5);
box-shadow: inset 0px 8px 9px -5px rgba(0, 0, 0, 0.5)
}
.share_icons {
width: 20%;
height: 54px;
float:left;
opacity: 0.9;
}
.ico_padding {
width: 20%;
height: 25px;
float: left;
padding-top: 14px;
}
jQuery(document).ready(function () {
$(document).on("click", ".showSingle", function () {
$('.showSingle').toggleClass('hide');
var index = $(this).attr('id');
newTarget = $('.share_sheet_' + index).slideDown('fast');
$('.collapse_share').not(newTarget).slideUp('fast');
});
$(document).on("click", ".collapse_share", function () {
$('.collapse_share').slideUp('fast');
$('.showSingle').removeClass('hide');
});
$(document).on("click", ".hide", function () {
$('.collapse_share').slideUp('fast');
});
});
I'm trying to create an autocomplete text field using typeahead.js. The examples here show suggestion lists that are nicely formatted. However, when I use the same code, I only get a bland list of suggestions like so:
Please see this jsFiddle for the code.
I'm using Bootstrap with it. What do I have to do to get a list that is formatted the Bootstrap way?
It looks like the default output has no styling at all and the .tt class has to be used to style the list. I got the following code by inspecting the element I wanted, tweak to suit your needs.
.tt-query,
.tt-hint {
width: 396px;
height: 30px;
padding: 8px 12px;
font-size: 24px;
line-height: 30px;
border: 2px solid #ccc;
border-radius: 8px;
outline: none;
}
.tt-query {
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.tt-hint {
color: #999
}
.tt-dropdown-menu {
width: 422px;
margin-top: 12px;
padding: 8px 0;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 8px;
box-shadow: 0 5px 10px rgba(0,0,0,.2);
}
.tt-suggestion {
padding: 3px 20px;
font-size: 18px;
line-height: 24px;
}
.tt-suggestion.tt-cursor {
color: #fff;
background-color: #0097cf;
}
.tt-suggestion p {
margin: 0;
}
Fiddle
I'm trying to style the sections inside the AutoComplete, but I don't know what to put in the CSS for the sections. I'm specifically trying to make:
color: #96f226;
border-radius: 0px;
border: 1px solid #454545;
Any suggestions???
Are you looking for this selector?:
.ui-menu .ui-menu-item a{
background:red;
height:10px;
font-size:8px;
}
Ugly demo:
http://jsfiddle.net/zeSTc/
Just replace with your code:
.ui-menu .ui-menu-item a{
color: #96f226;
border-radius: 0px;
border: 1px solid #454545;
}
demo: http://jsfiddle.net/w5Dt2/
Bootstrap styling for jQuery UI Autocomplete
.ui-autocomplete {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
float: left;
display: none;
min-width: 160px;
padding: 4px 0;
margin: 0 0 10px 25px;
list-style: none;
background-color: #ffffff;
border-color: #ccc;
border-color: rgba(0, 0, 0, 0.2);
border-style: solid;
border-width: 1px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
*border-right-width: 2px;
*border-bottom-width: 2px;
}
.ui-menu-item > a.ui-corner-all {
display: block;
padding: 3px 15px;
clear: both;
font-weight: normal;
line-height: 18px;
color: #555555;
white-space: nowrap;
text-decoration: none;
}
.ui-state-hover, .ui-state-active {
color: #ffffff;
text-decoration: none;
background-color: #0088cc;
border-radius: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
background-image: none;
}
Based on #md-nazrul-islam reply, This is what I did with SCSS:
ul.ui-autocomplete {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
float: left;
display: none;
min-width: 160px;
margin: 0 0 10px 25px;
list-style: none;
background-color: #ffffff;
border: 1px solid #ccc;
border-color: rgba(0, 0, 0, 0.2);
//#include border-radius(5px);
#include box-shadow( rgba(0, 0, 0, 0.1) 0 5px 10px );
#include background-clip(padding-box);
*border-right-width: 2px;
*border-bottom-width: 2px;
li.ui-menu-item{
padding:0 .5em;
line-height:2em;
font-size:.8em;
&.ui-state-focus{
background: #F7F7F7;
}
}
}
You can overwrite the classes in your own css using !important, e.g. if you want to get rid of the rounded corners.
.ui-corner-all
{
border-radius: 0px !important;
}