So I have this code and What I want is to put the resize button on the top right of the div,
so i rotated the outer box than and then rotated back the inner box to preserve the content,
It seems to work fine in chrome but in Mozilla it is using the original directions and it acts weird,
Not Working On Firefox(working on chrome)
(It is working but not as Accepted)
this is the simplified code
.chatbox-flipped{
/*important */
overflow: hidden;
resize: both;
transform: rotate(180deg);
width: 30%;
height: 400px;
position: fixed;
bottom: 0;
right: 0;
background: black;
}
.chatbox{
/*important */
transform: rotate(180deg);
color: white;
width: 100%;
height: 100%;
position: fixed;
bottom: 0;
right: 0;
background: blue;
}
.chatbox > .chats-container{
background: red;
}
<div class="chatbox-flipped">
<div class="chatbox">
<div class="chats-container">
<p class='received'>
hey bob
</p>
</div>
</div>
</div>
I have simplified the code You can View the full code over here
Complete Code(On JsFiddle)
I also went the js route but the mouse events are consuming almost 100% of one thread of my computer( I am running a i5 9300H on PopOS ),
That's why I am skeptical about using the JS ROUTE,
I also tried to update the thing around 30 times a second but it comes out there is no way to get the position of mouse without mouse event.
And also personally I like to use only CSS
Related
I need to reproduce a similar effect of this: https://dribbble.com/shots/3275340-Exploring-The-North-Face in the home page of the website i am working on. I read some comments in this dribble link, and the creator said that the effect was made with Adobe After Effects, so maybe this effect is not completely doable in the web environment.
(Old) Currently the way-to-go is a custom svg path set to display only the content inside of it, like this question: SVG viewbox overflow: hidden / crop.
My first goal was resolving how to make the transition between the two words not linear, so i created an outline of the clouds with svg path. My problem with this code here it's that as soon as i leave my developement resolution (approximately 1900x920) of my monitor the svg path doesn't resize and gets pushed after the end of the image.
My problems right now are 2:
Resolved Notice the transition over the two words, how it's not linear
Resolved he responsiveness of this whole section, how it breaks just moving like 10px away from my screen's resolution
Old Fiddle: https://jsfiddle.net/4kd36ya8/1/
UPDATE: I changed the whole code to try out another thing: CSS Masks (https://css-tricks.com/clipping-masking-css/) and this seems to work very good with what I am trying to achieve. The problem is with the position of the words. If i put them in position: fixed there is a bug in Microsoft Edge (see this question for reference; note that I already tried the fix that the post explains, but with no success at all).
Current Fiddle: https://jsfiddle.net/ztgyq1kc/4/
Current Code:
body {
/* Just to make the document scroll over */
height: 300vh;
}
.home-header {
height: 100vh;
}
.home-header .inside {
position: relative;
width: 100%;
height: 100%;
-webkit-mask-image: url("https://i.postimg.cc/SN3Wjsx3/test.png");
mask-image: url("https://i.postimg.cc/SN3Wjsx3/test.png");
z-index: 2;
}
.image {
width: 100%;
height: auto;
display: inline-block;
}
.cloud-writing {
height: 0;
line-height: 0;
text-transform: uppercase;
font-weight: 700;
font-size: 12.5rem;
letter-spacing: -1rem;
text-align: center;
position: fixed;
top: 50%;
width: 100%;
}
.cloud-writing.white {
color: #fff;
z-index: 3;
}
.cloud-writing.blue {
color: blue;
z-index: 1;
}
<div class="home-header">
<div class="inside">
<div class="cloud-writing white">Text1</div>
<img src="https://via.placeholder.com/1920x1080?text=placeholder" class="image" alt="" />
</div>
<div class="cloud-writing blue">Text2</div>
</div>
My next goal will be adding a parallax library (I still do not know which one) to handle all animations.
I am trying to do something basic (beginner in programming).
I try to take a large image and a smaller container, and move the image up or down inside while the user scrolls.
So you can .
Move the yellow up or down while the user can see the red in the same position (kept in doc flow).
If i create an image using this :
<div class="cvrContainer top left">
<div class="cvrPhoto" id="photo0" style="background-image: url(https://picsum.photos/900/850);"></div>
</div>
Should i set cvrPhoto to be larger then cvrContainer say 200% ?
How do i move it up/down with JS while keeping overflow hidden.
I do not ask how to calculate, only how to set it and move the only yellow inside
If you want to create simple parallax effect, you can achieve this effect by position fixed, add position: fixed on .cvrPhoto div.
.cvrContainer {
padding: 30px;
width: 100%;
height: 2000px;
overflow: auto;
background: url(https://picsum.photos/900/850);
}
.cvrPhoto {
height: 300px;
width: 200px;
position: fixed;
top: 57px;
background: yellow;
}
<div class="cvrContainer style=" background-image: url(https://picsum.photos/900/850); "">
<div class="cvrPhoto"></div>
</div>
I solved it by using css for the inner image (not background image but img tag) :
.prlxPhoto
{
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translateY(-50%) translateX(-50%);
}
and move it left/right for example with :
var e = document.getElementById("1");
e.style.marginLeft = equotion+'px';
I am trying to show a spinner when a button is clicked to indicate that browser is performing actions behind the scenes.spinner is showed right after I click the button on the Firefox browser but not on the Google Chrome browser. On Google Chrome browser there is a delay of 8 seconds. I have debugged it on developer tools while the action has performed but I do see that class attribute is been added to the html code right when the button is clicked.
Here is my markup:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="loadSpinner" style="display:none;"></div>
<button type="submit" class="btn spinnerEvent" >On</button>
<script>
$(document).on("click", "button.spinnerEvent", function(event){
$('#loadSpinner').addClass('show'); //LOADS THE SPINNER
});
</script>
<style>
#loadSpinner.show{
background:#000 url(../images/spinner-small.gif) no-repeat center center;
background-color: transparent;
height: 128px;
width: 128px;
position: fixed;
z-index: 1000;
left: 50%;
top: 25%;
margin: -25px 0 0 -25px;
}
</style>
I have created a working fiddle with minor changes to your code:
https://jsfiddle.net/jennifergoncalves/783gyyou/2/
HTML:
Removed display:none as that inline style will take precedence over your CSS style defined in the style tag
<div id="loadSpinner"></div>
<button type="submit" class="btn spinnerEvent">On</button>
CSS:
Setting all styles in the style tag.
#loadSpinner {
display: none;
}
#loadSpinner.show {
background: #000 url(../images/spinner-small.gif) no-repeat center center;
background-color: red; /*changed from transparent to red so you can see the div, even though I don't have access to the actual image*/
height: 128px;
width: 128px;
position: fixed;
z-index: 1000;
left: 50%;
top: 25%;
margin: -25px 0 0 -25px;
display: block;
}
In Google Chrome, the loading div appears right away on click of the button.
If you are still experiencing problems, try to preload the spinning image on the page. It may simply be that the image itself is taking some time to load and there is not a delay in your code.
Here are some tips on how to preload CSS images used as backgrounds after the page loads: https://css-tricks.com/snippets/css/css-only-image-preloading/
I have asked questions like this and have not really got an answer that really helped me! I know it is probably very easy and i just can't figure it out!
I have been studying jQuery for a few days now and have the basics down but cant create the right function to make this effect happen! Please visit the website below!
There are a few things i would like to know about! The first thing is when you first go to the site everything slides into place (sidebar, footer, etc.) The main concern is the sidebar how when you hover over one of the icons a kind of tool-tip eases appears and eases to the right side.
The next part i would like to know is when you click one of the icons a whole another window pops out. I kind of have an idea of how these both happen but i cant put all the pieces together. Please help me out! I know it cannot be that difficult. Even if you know of any jQuery plugins that can help achieve these results, would be even better!
http://intothearctic.gp/en/
HTML
<div id="sidemenu">
<div id="regionsContainer">
<div id="regionsUnitedStates"></div>
</div>
</div>
CSS
#sidemenu {
width: 60px;
height: 100%;
min-width: 60px;
height: 100vh;
max-width: 60px;
background-color: #383D3F;
background-size: 100% 100%;
background-attachment: fixed;
margin-top: -8px;
margin-bottom: -8px;
margin-left: -8px;
position: absolute;
}
#regionsContainer {
width: 60px;
height: 481px;
min-height: 481px;
min-width: 60px;
max-width: 60px;
max-height: 481px;
background-color: #383D3F;
position: relative;
top: 25%;
bottom: 25%;
}
#regionsUnitedStates {
width: 60px;
height: 60px;
background-image:url(../_images/_header/regionsUnitedStates.png);
}
#regionsUnitedStates:hover {
background-position:bottom;
}
you can do that using position: absolute like mentioned by fizzix before, and for each of your question with this html example
<div id="sidemenu">
<div id="submenu" class="not-open">
Sub
<div id="submenu-inner">
inner
</div>
</div>
<div id="submenu-item1">
item
</div>
</div>
1 The first thing is when you first go to the site everything slides into place (sidebar, footer, etc.)
This can be achieved with jQuery on document ready, and using setTimeout if you want to further delay it, then add a class to the element, like this
CSS :
#sidemenu {
background: #000;
width: 50px;
height: 100%;
position: absolute;
left: -50px;
transition: left ease-in-out 0.5s;
}
#sidemenu.show {
left: 0;
}
jQuery :
$(function() {
setTimeout(function() { $("#sidemenu").addClass("show") }, 500);
});
2 The main concern is the sidebar how when you hover over one of the icons a kind of tool-tip eases appears and eases to the right side.
This can be achieved with only CSS on hover, what you need is put the floating element inside the element you want to hover, in this example submenu-inner inside submenu, then add some CSS
#submenu {
background: #fff;
height: 50px;
margin: 150px 0 0 0;
text-align: center;
position: relative;
}
#submenu.not-open:hover #submenu-inner {
left: 50px;
opacity: 1;
}
#submenu-inner {
opacity: 0;
position: absolute;
transition: all ease-in-out 0.5s;
top: 0;
left: 250px;
height: 50px;
background: #f00;
}
firstly, the inner element is transparent and positioned more to the right using left, then on hover, set the position right beside the container, by setting the left CSS again to the width of the container
3 The next part i would like to know is when you click one of the icons a whole another window pops out
it's the same with number 1, except this one triggered by onClick event
here's the working example on JSFIDDLE
I dont think any plugin is required.
You can use translate to keep the menu hidden.transform:translate(90%)
Please refer this example:JSFIDDLE
The entire site is using absolute positions. This means that they are positioned on the page with pixel co-ordinates. They then using jQuery animate to move the top and left positions.
I have made a brief example of how to do this HERE. You can edit this to your liking.
If you are interested in seeing what the site was built with, you can see a whole list HERE
I'm having trouble animating this item using PHP and CSS and Javascript (with jQuery).
I want a div that slides out from the left side of the screen when its tab bar is hovered over.
I have three divs: the container, the contents, and the tab.
Here's the Javascript and HTML:
<div id="LeftSidebar">
<div id="LeftSidebarTab" class="">
Left sidebar tab
</div>
<div id="LeftSidebarContents" class="">
Left sidebar contents
</div>
<script type="text/javascript">
$("#LeftSidebar").mouseenter(function()
{
$("#LeftSidebar").animate(
{
left: 0px
});
});
$("#LeftSidebar").mouseleave(function()
{
$("#LeftSidebar").animate(
{
left: -100px
});
});
</script>
</div>
Here's the CSS:
#LeftSidebar
{
position: absolute;
display: block;
z-index: 12;
top: 220px;
left: 0px;
background-color: green;
height: 500px;
}
#LeftSidebarTab
{
float: right;
background-color: red;
width: 20px;
height: 100%;
}
#LeftSidebarContents
{
background-color: blue;
width: 100px;
height: 100%;
}
I'm new to Javascript, HTML, and et al.
The code isn't doing what I expect it to do.
I expect it to, when hovered over, gradually move the 'left' CSS property to 0px, and when the mouse moves off of the contents, move the 'left' CSS property to -100px.
When I hover over it, I see no visible change to the div. I can't even tell if the 'mouseenter()' or 'mouseleave()' functions are even being triggered.
Questions:
1) How can I check if the function is being triggered or not? Can I output some text or something, using Javascript? Maybe pop up a dialog box for debugging?
2) Will mouseenter/mouseleave be triggered for 'LeftSidebar', even though LeftSidebarContents and LeftSidebarTab completely cover every pixel of LeftSidebar?
3) Am I making any obvious mistakes in the above code that's causing it not to work as I expect?
You probably want to put some single quotes around the 0px.
Check this: http://api.jquery.com/animate/
Copy their example and get theirs working them modify it to your needs.
As for alerts to check if the event is being triggered:
alert("Thanks for visiting!");
Use ff with firebug or chrome to debug your script. Put a pointer on the functions, this will cause the browser to pauze execution of your script so you can step over it and see what happens.
A quick and dirty test to figure out if an event is being triggered is to use the alert function. For example:
$("#LeftSidebar").mouseenter(function()
{
alert("Mouse Enters Region");
});
Also this is how I would do your css file:
#LeftSidebar
{
position: fixed;
display: block;
z-index: 12;
top: 220px;
left: -100px;
background-color: green;
width:120px;
height: 500px;
}
#LeftSidebarTab
{
position:absolute;
background-color: red;
width: 20px;
height: 500px;
left:100px;
top:0px;
}
#LeftSidebarContents
{
background-color: blue;
position:absolute;
left:0px;
top:0px;
}
I would recommend learning more about the CSS Box Model and probably just reading up on HTML/CSS in general.