Currently I have a menu that comes out from the side of the screen but it just overlaps the content on the page. I need it to reduce the main content size or to sqeeze/push it.
Hopefully this is enough code for you to understand. My project is huge so I cant post all the code
I want my menu to behave like the right push menu here: http://tympanus.net/Blueprints/SlidePushMenus/
My Javascript:
$(document).ready(function() {
$(".Help").click(function() {
var $body = $("#sliderMenu");
$body.animate({
right: parseInt($body.css("right"), 10) == 0 ? -($("#sliderBody").outerWidth()) : 0
});
});
});
CSS:
#sliderMenu
{
position:absolute;
top:0px;
right:-360px;
height: 100%;
z-index: 1000;
}
#sliderBody
{
float:right;
top:0px;
width:349px;
background:#333333;
border-left: 2px solid #00B463;
border-top: 2px solid #00B463;
border-bottom: 1px solid black;
padding-left: 10px;
height: 100%;
color: White ;
padding-top: 5px;
}
Related
This question already has answers here:
Selecting and manipulating CSS pseudo-elements such as ::before and ::after using javascript (or jQuery)
(26 answers)
Closed 6 years ago.
According to some methods i saw, i tried this to manage the position left of a pseudo element :
$("a").click(function() {
var percent = $("input").val(); //Maths returning an value to set
$(".formEvent").addClass("trig");
console.log(percent);
$("[formEventPointer]").css({ /* CALLING THE PSEUDO ELEMENT*/
left: percent + " %"
});
});
.formEvent {
top: 50px;
/* For the example */
padding: 10px;
height: 80px;
background: #272727;
position: relative;
transition: 300ms;
height: 30px;
margin-top: 10px;
margin-bottom: 0;
}
.formEvent.trig:before {
content: attr(formEventPointer); /* TAKE A SPECIAL LOOK RIGHT THERE */
position: absolute;
left: 5%;
top: -15px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 15px solid #272727;
}
a {
background-color: #1162A7;
color: white;
border: 1px solid grey;
box-shadow: 5px 5px 5px black;
cursor: pointer;
padding: 3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class='formEvent'>
Change the position :
<input type="range" value="5" max="100" min="0" step="14.285">
<a>Update</a>
</form>
Unfortunately, i'm not able to properly manage as i want the position of the :before pseudo element, with the attribut set in the content. What did i forget, or how can i fix this ?
EDIT :
It's different because i try to use what the question said to perform a task, i'm not asking for what i already use to accomplish a part of a task...
I guess you are doing it in a bit of wrong way.
You are trying to get element using attribute, rather you should try to apply CSS on the basis of attribute
In HTML:
<span>foo</span>
In jQuery:
$('span').hover(function(){
$(this).attr('data-content','bar');
});
In CSS:
span:after {
content: attr(data-content) ' any other text you may want';
}
I just created some tooltips via Bootstrap for my web project, but It doesn't work properly. Whenever I cache refresh my page, It stops working. Whenever I go to my Sublime text editor and click Save All, and refresh the page regular, it starts working perfectly. I don't quite understand if it is because of the loading time of the page. Here is my code that takes care of my tooltips:
$('.reg-joint').each(function(index,element)
{
var jointid = $(element).attr("id");
var jointName = $(element).find('img').attr("alt");
var description = "";
if( typeof joints[index].description !== 'undefined' )
{
description = joints[index].description;
}
$(element).tooltip({
animation:true,
delay:{"show":100,"hide":100},
html:true,
placement:'top',
trigger:'hover',
title:description,
});
$(element).tooltip();
});
I have another issue about these tooltips, whenever it works I got a couple of unexpected arrows pop out.
At the left bottom of the tooltips there is a mini arrow there and I don't know how i am going to get rid of it. I checked my other codes if I had a special character or not but I couldn't find any. Here is my .css codes for that:
<style>
.tooltip{
position: absolute;
}
.tooltip-inner {
position: relative;
max-width:400px;
background: #ffffff;
border: 3px solid #0CBC99;
color: #0c76a0;
font-size: 20px;
text-align: left;
}
.tooltip-inner:after, .tooltip-inner:before {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.tooltip-inner:after {
border-color: rgba(86, 113, 176, 0);
border-top-color: #ffffff;
border-width: 10px;
margin-left: -10px;
}
.tooltip-inner:before {
border-color: rgba(157, 183, 199, 0);
border-top-color: #0CBC99;
border-width: 13px;
margin-left: -13px;
}
</style>
$(element).tooltip();
Appears twice, you can see a simple tutorial here: http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-tooltips.php
I've never heard of this before and I'm really confused.
The deal is that I have the following code,
Javascript
$(document).ready(function () {
showSideBar('sbselection_1');
$('.talkbubble').click(function () {
var sidebarSelector = $(this).find('.tbselector').val();
showSideBar(sidebarSelector);
});
$('.clickables').on('click','.talkbubble',function () {
$(this).siblings('.talkbubble').removeClass('clicked');
$(this).addClass('clicked');
});
});
function showSideBar(selector) {
$('.sidebarContent').hide();
$('.sidebarContent.' + selector).show();
}
CSS
.sidebar{
position: absolute;
background-color: rgb(153,153,153);
width: 250px;
height: 300px;
}
.sidebarcontent{
display:none;
overflow:hidden;
}
.clickables {
position: absolute;
left: 270px;
}
.talkbubble {
background: white;
color: rgb(0,0,0);
font-family: Rockwell, Garamond, "MS Serif", "New York", serif;
font-size: 12px;
height: 40px;
margin-top: 1%;
margin-bottom: 20px;
position: relative;
width: 130px;
z-index: 5;
}
.talkbubble:before {
border-top: 10px solid transparent;
border-right: 10px solid white;
border-bottom: 10px solid transparent;
content:"";
height: 0;
position: absolute;
right: 100%;
top: 10px;
width: 0;
}
.clicked {
background:rgb(153,153,153);
}
.clicked:before {
border-right-color:rgb(153,153,153);
}
.talkbubble:hover{
background-color: rgb(112,112,112);
color: rgb(255,255,255);
}
.talkbubble:hover:before {
border-right-color: rgb(112,112,112);
}
.thumbnail {
height: 33px;
width: 30px;
float: left;
position: absolute;
margin: 4px;
z-index: 2;
left: 2px;
top: 0px;
}
.words {
height: 24px;
width: 150px;
position: absolute;
float: right;
left: 40px;
top: 10px;
}
#orangetriangle{
border-top:25px solid green;
height: 0;
position:absolute;
width: 0;
z-index:3;
border-right: 25px solid transparent;
height: 0;
position:absolute;
width: 0;
z-index:5;
border-top-color: rgb(255,138,0);
}
#dkpurpletriangle{
border-top:25px solid green;
height: 0;
position:absolute;
width: 0;
z-index:3;
border-right: 25px solid transparent;
height: 0;
position:absolute;
width: 0;
z-index:5;
border-top-color: rgb(120,3,105)
}
#powderbluetriangle{
border-top:25px solid green;
height: 0;
position:absolute;
width: 0;
z-index:3;
border-right: 25px solid transparent;
height: 0;
position:absolute;
width: 0;
z-index:5;
border-top-color: rgb(99,89,288);
}
HTML
Event 1
<div class="talkbubble">
<input type="hidden" class="tbselector" value="sbselection_2" />
<div class="thumbnail">
<img src="images/thumbnail1.png" height="33" width="30" align="middle" />
</div>
<div class="words">Event 2</div>
</div>
<div class="talkbubble">
<input type="hidden" class="tbselector" value="sbselection_3" />
<div class="thumbnail">
<img src="images/thumbnail1.png" height="33" width="30" align="middle" />
</div>
<div class="words">Event 3</div>
</div>
</div>
And you can see it on this fiddle https://jsfiddle.net/petiteco24601/rhjw8uzm/9/
Which is great and beautiful and does exactly what I want it to do.
Next I put it on a html page that I put together, you can see it here:
http://www.emich.edu/dining/draft/index.html
Again, this button display is working wonderfully and doing exactly what I want it to do.
Then I had to go through a specific server and use their system- which I'm a tad unfamiliar with and really forces you to separate everything, not just by folders but essentially you have two libraries working together to pull together the appropriate css, javascript, and html. As such, you can see that I do have a lot (against my better judgement) of inline styles and inclusion of javascript at the header rather than in a separate sheet. Nonetheless
http://webstage.emich.edu/dining-new/index.php
If you hit "inspect source" you see what I'm seeing when I'm working on it. The click-able display looks almost identical to the one on jsfiddle- but you hit Inspect Element and you see that all the <div class="sidebarContent"> is embedded inside each other. As such, it won't display the appropriate pictures to fill the <div class="sidebar"> area.
Any ideas??? Please and thank you!
Looks like the problem is you have used the self closing syntax for the inner divs of .sidebarContent elements like <div id="eetriangle" /> instead of using <div id="eetriangle"></div>.
Demo: Problem, Solution
What are all the valid self-closing elements in XHTML (as implemented by the major browsers)?
If you have noticed clearly in both the .clickables you have the below code
https://jsfiddle.net/petiteco24601/rhjw8uzm/9/
http://webstage.emich.edu/dining-new/index.php
.clickables {
position: absolute;
left: 270px;
}
in case of your which you dont have just add the below and it works identical :)
.clickables {
margin-left: auto;
position: absolute;
left: 333px;
}
So I went through and did some research on the server we're using. It turns out that I was correct in thinking that there was something wrong with how the library was parsing the information. Specifically, when the library puts everything together, it doesn't know what to do with an empty box and therefore immediately starts embedding other boxes inside of it- effectively destroying the code. Easy fix: just add an html comment inside of each empty box, and the program believe the is populated so it leaves it alone.
Thank you everyone for your help and suggestions!
I have a button. On click on this button, i want to show a div to the right side of the button, just like tooltip.
This button can be anywhere on the screen. How to show it on the right & make it responsive?
DEMO
CSS
.tooltip {
background-color: red;
background-color:#EDEDED;
/*background color of tooltip*/
border:1px solid black;
position:absolute;
top:50px;
z-index:100;
line-height:1.3em;
padding:8px;
width:200px;
/*default width of tooltip*/
border-radius:8px;
/*CSS3 border radius*/
-moz-border-radius:8px;
-webkit-border-radius:8px;
box-shadow:0 0 10px #888888;
/*CSS3 shadow*/
-moz-box-shadow:0 0 10px #888888;
-webkit-box-shadow:0 0 10px #888888;
}
Reponsive is a little more tricky, but this will position your tooltip to the left of your button (as dynamically as possible for now):
Fiddle Demo
$('#tooltip').click(function () {
var objButton = $(this);
var objTooltip = objButton.next();
var objPosition = objButton.position();
// Left adds width + padding + offset
$(".tooltip").css({"top" : objPosition.top, "left" : (objButton.width() + 26) + 'px'}).toggle();
});
As Alex mentioned, making it responsive will be tricky. But as an alternative, according to the size of the device, you could either place the tool-tip on right or bottom. So to display it on right, you could use as follows:
.tooltip {
background-color:#EDEDED;
border:1px solid black;
border-radius: 3px 3px 3px 3px;
margin-left: 8px;
padding: 1px 6px;
z-index: 999;
position: absolute;
display: none;
}
DEMO
With the above example, even if you add text before the button, the tool tip aligns properly.
I have a hidden layer and when the user clicks a button the layer is set to show. How can I make the parent page become disabled/greyed out so the user cannot click anything on the parent page until the layer has been closed(set to hide)
similar to lightbox galleries
I call a function in the layer from the parent page from a button(edit) click
edit.onclick=function(){
edit_box('show');
}
then on the layer I call the show function
function edit_box(showhide)
{
if(showhide == "show")
{
document.getElementById('popupbox').style.visibility="visible";
}else if(showhide == "hide"){
document.getElementById('popupbox').style.visibility="hidden";
}
}
the css for the #popup is
#popupbox{
padding:0;
margin: 0px auto;
background:white;
border: solid #000000 1px;
z-index: 9000;
font-family: arial;
visibility: hidden;
}
and the html is
<div id="popupbox">
<div class="close"><a href="javascript:edit_box('hide');" >close</a></div>
any pointers greatly appreciated as I do not know where to start on this one and can only find code relivent to pop up boxes elsewhere online
why dont you try with jQuery, jQuery（"#popupbox"）.hide();
Change your style to
#popupbox{
padding:0;
margin: 0px auto;
position:fixed;
top:0; left:0; right:0; bottom: 0;
display:none;
background: rgba(255,255,255,0.5);
border: solid #000000 1px;
z-index: 9000;
font-family: arial;
}
and your function to
function edit_box(showhide)
{
if(showhide == "show")
{
$('#popupbox').show();
} else if (showhide == "hide") {
$('#popupbox').hide();
}
}
if you want to support browsers that do not understand rgba colors then use a semi-transparent background .png image
ok sorted this out with
css on parent page
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
css on layer page
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
then the js on parent page within function calling popup layer
document.getElementById('fade').style.display='block'
html div on parent page
<div id="fade" class="black_overlay"></div>
js on popup layer
function edit_box(showhide){
if(showhide == "show"){
document.getElementById('popupbox').style.display='block';
document.getElementById('popupbox').style.visibility="visible";
}else if(showhide == "hide"){
document.getElementById('popupbox').style.display='none';
document.getElementById('fade').style.display='none'
document.getElementById('popupbox').style.visibility="hidden";
}
}
and the html on the layer
<div id="popupbox" class="white_content">
<div class="close"><a href="javascript:edit_box('hide');" >close</a></div>
</div>