I'm struggling with my calendar because it actually takes too much space in the page.
The calendar is hidden at first:
Visible="False"
Then when I click the button to select the date I show it:
protected void btnCalendar_Click(object sender, ImageClickEventArgs e)
{
if (Calendar1.Visible)
{
Calendar1.Visible = false;
}
else
{
Calendar1.Visible = true;
}
}
The problem is that the calendar takes the space in the page anyway, also if it's hidden, and when it opens up the page becomes pretty "awkward".
I'd like the calendar to be shown on top of the other items on the page, just on a "upper level", that way it doesn't split the header from the middle of the page.
Is there any way to do that with html or css?
I've tried to put the calendar into a div, but then I couldn't find anything useful about the stuff I needed
2 options... and visible isn't one of them.
You could use
display: none;
in your CSS as suggested above. Setting display none doesn't show the element, or even make room for it on the page.
The better option (as in aesthetically pleasing) would be to use position, opacity, z-index and pointer-events. It's a bit more time consuming, but gives you the option to transition the element into place.
#Calendar1.show {
position: absolute;
z-index: 1000;
opacity: 1;
pointer-events: auto;
transition: opacity 0.5s ease;
}
#Calendar1.hide {
opacity: 0;
pointer-events: none;
}
Then just change the class to show or hide the element...
Danny
use 'display:none' , 'visibility:hidden' hides element but takes place
Take a look at this link
Related
I recently "made" a website for a friend and it stopped working after I edited some of the content. I don't know why the whole website is broken. It should have images and such...
Please take a look at the website and tell me if anything stands out to why it doesn't work. Thanks!
I have looked at all the html tags and they are all fine.
Your problem is opacity for <article> div is 0:
#main article{
opacity: 0;
}
change to
#main article{
opacity: 1;
}
You have set the opacity to 0 for all ARTICLE elements within your main DIV. I see you have a transition setup for opacity, so I'm assuming you meant to either adjust that opacity value via a script or an animation. Either way, until you implement such, remove the opacity style:
#main article {
...
opacity: 0;
}
Here I am again, drowning in my noobness. I have been searching for literally HOURS to solve this problem! I am totally a beginner in jQuery/Javascript so I need some help.
This is what I want to do:
I have a navigation bar that when you click on a button, it hides it, then when you click again, it toggles it back, so the navigation bar is visible again. I have done this with jQuery and it works perfectly.
Now what happens is that, when you click that button and hide the navbar, I want the div content to slide to the left a few pixels and take up the full width (thus growing a bit bigger and filling up the useless whitespace, I especially want this for mobile-users). Again, this works perfectly.
However...if I click back on the famous button, the navigation bar comes back but the div content is still to the left, slightly hidden by the navbar. Whereas I want that when to navigation comes back, the div content comes back to its original place and width aswell.
Thus I have tried many many different codes but nothing seems to work! It either stays left or it just does not do anything. Although interesting and fun, it gets kind of frustrating after a few hours.
Here are a few things I have tried:
-toggle
-animate/stop
-if/else
-Get x position
I did not save any jQuery/javascript code but if need be, I shall provide a snippet. The reason I do not want to provide any code is because it is insanely LONG and confusing and complex!
As such, thank you very much in advance for your help! =)
Ah one last thing: Again, please keep in mind that you are talking to a beginner! So may you please be very specific and methodical (and keep it simple if possible ^^'), I would very much appreciate it since I have been searching for hours on Google and stackoverflow.
Oh woops I forgot! I do not use pixels for my units. I use "%" for the sake of responsiveness...I don't know if that actually works with jQuery...Enlighten me!
**ALRIGHT! Here is my super complicated fiddle...Somehow the jQuery is not working in my fiddle but it is working on my browser.
<html>Some super random code because it won't let me post fiddle without it but all my code is in the fiddle...</html>
https://jsfiddle.net/czcvucxL/1/**
you can get it done toggling a class from .content1 instead of using jquery
Demo
$(document).ready(function(){
$("#CharaCircle a").click(function(){
$("#Header").animate({width:'toggle'},350);
$("#Sidebar, #Sidebar ul li").animate({height:'toggle'},250);
$(".content1").toggleClass("fullwidth");
return false;
});
});
add this class
.fullwidth {
width: 95%;
left: 0;
margin-left: 0;
}
add these to .content1 so the div starts with 10% on the left and allow the animation(transition)
.content1{
left: 10%;
-webkit-transition: left 0.2s ease-in, width 0.2s ease-in;
transition: left 0.2s ease-in, width 0.2s ease-in;
}
EDIT: if you want it only with jquery Demo
$(document).ready(function () {
$("#CharaCircle a").click(function () {
$("#Header").animate({
width: 'toggle'
}, 350).toggleClass("hidden");
$("#Sidebar, #Sidebar ul li").animate({
height: 'toggle'
}, 250);
var properties;
var $content = $(".content1");
//build your set of properties width and marginleft
//are the ones you need to change
if ($("#Header").hasClass("hidden")) {
properties = {
width: "100%",
marginLeft: "0"
};
} else {
properties = {
width: "62%",
marginLeft: "19.4%"
};
}
$content.animate(properties, 250);
return false;
});
});
I am building a collaborative coding environment which has multiple user cursors. I need to show user's nick when other user hover on their cursor in a tooltip (like google docs does). I've tried every way I could think of injecting DOM into the class that I give to the cursor, but tooltips just don't show up.
How can I show a tooltip on the cursor (caret) when a user hovers on it?
I know this is late but it might help someone in the future.
I had the same issue in Ace where I firstly couldn't get any tooltip showing, and secondly couldn't get it to show on hover.
Hover
Marker nodes have pointer-events: none in Ace, so hover is essentially disabled and needs to be re-enabled.
Add pointer-events: auto to the marker/caret.
I.e:
.ace-multi-cursor {
pointer-events: auto;
}
Ref: https://github.com/ajaxorg/ace/issues/2720
Title/Tooltip
I was using ace-collab-ext. So to add the username above the caret I edited AceCursorMarker.js by adding <span class="ace-multi-cursor-username" style="background-color: ${this._color}; top: -8px; position: relative;">${this._title}</span> and recompiling ace-collab-ext.min.js. Below is where I added the title span:
// Caret Top
html.push(
'<div class="ace-multi-cursor ace_start" style="',
`height: ${5}px;`,
`width: ${6}px;`,
`top: ${top - 2}px;`,
`left: ${left + 4}px;`,
`background-color: ${this._color};`,
`"><span class="ace-multi-cursor-username" style="background-color: ${this._color}; top: -8px; position: relative;">${this._title}</span></div>`
);
There may be an easier way to do this that suits you, but this way worked for me especially with keeping the background-color permanent, as the attempts I made through js/css didn't persist after initialisation (cursorManager.addCursor).
CSS
This is the total css I added to my solution:
.ace-multi-cursor {
position: absolute;
pointer-events: auto;
}
.ace-multi-cursor:hover > .ace-multi-cursor-username {
opacity: 1;
}
.ace-multi-cursor-username {
opacity: 0;
pointer-events: auto;
}
My solution ended up looking and functioning exactly like the Google Docs marker, caret and tooltip.
Unfortunately it's not trivial to do. And requires more code than i can add to this answer. But there are several implementations available on github e.g https://github.com/sharelatex/web-sharelatex/blob/a91ec74d1256ad063cd37693aab620b6f1a6ce0d/public/coffee/ide/editor/directives/aceEditor/highlights/HighlightsManager.coffee#L102 which you can test on https://www.sharelatex.com/
I tried a lot to solve the following: A click on "#pageTitle" should open the "#expandMenu". The expandMenu is exactly located in the bottom of the menubar. As you can see in CSS, there is a hover effect on the background-color. The code works fine so far, but even thought I still have a problem: The menubar should stay in the hover-color, till the toogleMenu gets closed. The user need to reach the expandMenu with his mouse for interacting. But after that, with my current code the via jQuery added css doesn't reset itself to the default css-hover mode.
It also would be nice, if the solution could include the possibility to add some further events, for example a switching icon (open, closed)
The CSS:
#expandMenu {
background-color: #009cff;
opacity: 0.8;
height:65px;
width:100%;
display:none;
}
#menubar {
height:95px;
width: 100%;
color:#FFF;
}
#menubar:hover {
background-color:#0f0f0f;
transition: background-color 0.3s ease;
color:#FFF;
}
jQuery:
$(document).ready(function(e){
$("#pageTitle").click(function() { $('#expandMenu').slideToggle( "fast");
$('#menubar').css( "background-color", "#0f0f0f" ); } );
})
HTML:
<div id="menubar">
<div id="pageTitle">Start</div>
</div>
<div id="expandMenu">
</div>
I have created a fiddle here that I think captures your page pretty well. I have tweaked the css class for the menubar a little bit so that the text stays visible, but the main change I have made is adding a class to the #menubar rather than directly applying the new background color. Then when you are hiding the #expandMenu you can remove the class to go back to the original color, whatever it was.
I check whether the expandMenu is visible and adjust the classes accordingly:
if ($('#expandMenu').is(':visible'))
{
$('#menubar').removeClass('menu-active');
}
else
{
$('#menubar').addClass('menu-active');
}
I check this state before I toggle the menu item because the slideToggle takes some time to finish, and the div is not visible immediately after the call. Checking its state before applying the animation avoids this problem.
I am trying to arrange my html/css/jquery so I can toggle the visibility of a
div by double clicking on it. I can make it hidden by a double click but when I
double click again it does not reappear. When I check to see all of the div outlines,
the outline of this div is no longer there. I use a web developer plugin to check.
I am using the following codes to try to accomplish this:
My css classes are..
.hidden { visibility: hidden; }
.unhidden { visibility: visible; }
the html is...
<div id="ConstructionDiv" ondblclick="unhide('ConstructionDiv')" class="unhidden">
<!.. the div is unhidden at page load. When I look at generated
source code after the double click the class is "hidden"
-->
</div>
my javascript is...
function unhide(divID) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
}
Is it possible to do what I am trying? There must be something that works.
Thank you.
I just tried this, and invisible elements cannot receive click events.
As Andy said, Opacity 0 can receive click events just fine, and the contents are still invisible.
Use the following css rules:
.hidden {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";
filter: alpha(opacity=1);
-moz-opacity:.1;
-khtml-opacity: .1;
opacity: .1;
}
.unhidden {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
-moz-opacity:1;
-khtml-opacity: 1;
opacity: 1;
}
UPDATE
You can also wrap the element in some other element like div and then use the click of that div to show or hide the inner content.
What if you have two divs, both placed absolutely, but one possibly much larger than the other. clicking one changes the visibility of both of them.