I want to create a click event that will have two photos on opposite corners of the screen move towards each other, once they collide, they move back in the direction they came from.
I am having trouble placing an image on the top right corner. I tried using "float: right" but when I tried that, my function does not work.
To place the images on the top right corner you should use absolute positioning:
.class {
position: absolute;
right: 0;
}
Also do you really need javascript to animate this?
It would be better and more performatic to do it with some CSS. Checkout this fiddle I made: https://jsfiddle.net/jv5et9L0/
In the fiddle I use absolute positioning to put the elements where I want, and then, through Javascript, I add apply the transform() property on my CSS. The animation occurs because I have set the transition property on the .item class.
This seems like it would be an easy thing to figure out, but I can't seem to find what I'm looking for.
I want to animate the width of a div from right to left. It seems that this works left to right by default.
TweenMax.from($("#hero-container"),0.5,{width:0});
I tried to change the origin of the div, but that didn't seem to make a difference.
You need to align #hero-container to the right edge of whatever container it's in, and then animate the width.
I prefer using flexbox, but you can use position: absolute; right: 0; too if that tickles your fancy - But that presents a whole new level of problems, as it removes your element from the document flow.
Quick example using flexbox: https://codepen.io/jeppeolesen/pen/VyKebx
I'll try and keep it concise.
I am required to utilise the draggable plugin for GSAP in my project. The plugin is great and works really well. I think my issue is just something I'm not quite grasping.
Codepen:
https://codepen.io/mhcdotcom/pen/dzyNmB
Dragging the #stage element allows the click and drag functionality.
The .inner element extends out of the container div so I use overflow:hidden on the stage element.
When I do this, the portion of the .inner elements that extend past the viewable area don't come in to frame and seem to be cut off.
Is there a way around this in GSAP? What am I missing?
I have googled to no avail.
Any help is much appreciated.
Thank you
Moe
"All" draggable does is add a transition to the element that is dragging, so any overflows etc will still be honoured.
I can't be 100% sure what you are trying to achieve, but you can add classes on dragStart/dragEnd that means you should be able to get the behaviour you need.
I have forked a codepen giving you a basic example.
onDragStart: function() {
stage.classList.add('dragging');
},
onDragEnd: function() {
stage.classList.remove('dragging');
}
https://codepen.io/motionimaging/pen/xLxLpG
I am using Ckeditor 4. Setting the property uiColor makes it always gradient. Is there a way to setup a solid ui color?
Using the inline editor with the 'sharedspace' plugin:
CKEDITOR.on('instanceReady', function (e) {
$('.cke_top').css('background','#eee');
})
You have to edit skin.js in /ckeditor_path/skins/skin_name/skin.js and modify CKEDITOR.skin.chameleon part that controls uiColor management to get rid of gradients. No other clean & easy way.
I have found that doing things like this in CKEditor are extremely frustrating. I tried finding a way to do this for a long time and changed the skin.js file, and several other things. In the end, I fixed it by changing the property with jquery after the editor loaded.
$('.cke_inner').css('background','transparent');
You can substitute '#012345' for 'transparent' and it will be a solid color.
So I've spent a significant amount of time coding and designing this webpage, and it works perfectly in every browser I've tested it in: IE7, IE9, Firefox, Chrome, Safari. But when I view the webpage in IE8 (and only IE8), the vertical scroll is disabled. The scroll bar is there all right, but it's turned off and I can't use it or the mouse scroll wheel.
I'll post the code for the webpage if I absolutely have to, but first I wanted to see if anyone had ever heard of this happening before or had any initial thoughts.
Okay, I figured this out. If you put height: "100%"; in the html tag of your page's CSS stylesheet, it will break scrolling in IE8, but other browsers will still work. Go figure.
Here is a hack way of getting the scrollbar to work with a height of 100%. Not the best solution but it now scrolls in IE8.
html {
overflow-y: hidden\9;
}
html, body {
height: 100%\9;
}
body {
overflow-y: scroll\9;
}
mainly three things you should see
If you have given style as overflow:hidden
If you have given hight in page percentage.
if you have given float:static.
Fix this issue your IE 8 problem will be solved.
Reason : IE 8 is different than nything else for CBC check IE frist! To the topic, IE 8 hides (only scrolling bar) of scroll bar if you have overflow as hidden, secoundly if you have places hight as 100% IE 8 takes overflow as hidden (can say takes by its own!) n float is element who can go beyond page size if you have it as inherit or relative but static dose not increase dynamicly.
You tried on other IE8 (not your local ie8)? Maybe the problem is in your ie8.
Run with no-addon mode or try to disable all addons (including bars)
Restore advanced settings. Tools -> Internet Options -> Advanced -> Restore Advanced options.
I have also faced this type of problem many times.Scroll bar with IE8 , should not visible in a plain HTML page. So, please check the content inside your <body></body> tag . There may be is some margin or padding tag.
I am using IE8 currently , but there is no such scroll bar is showing. No need to fix the height:100% for HTML or BODY. Please check your page deeply.
If you are using CSS, it may come in handy that you need a reset CSS value so that the page renders properly in IE8. I have provided the link as well as the snippet from http://sixrevisions.com/css/css-tips/css-tip-1-resetting-your-styles-with-css-reset/ . This may help you. If anything this is a nice site to read if you are starting development.
A reset to where it all started…
The concept of CSS Reset was first discussed formally way back when dinosaurs still roamed the internet (2004 to be exact) by Andrew Krespanis. In his article, he suggests using the universal selector (*) at the beginning of your CSS file to select all elements and give them 0 values for margin and padding, like so:
* {
margin: 0;
padding: 0;
}
The universal selector acts like a wildcard search, similar to regular expression matching in programming. Since in this case, the * isn’t preceded by another selector, all elements (in theory – some browsers don’t fully support it) is a match and therefore all margins and paddings of all elements are removed (so we avoid the spacing differences shown in Example 1).
Applying the universal selector margin/padding reset to our earlier example, we now remove all inconsistent spacing between all browsers (in other words, we don’t make the browsers think for us, we show them who’s boss).
Example 2: Applying the universal selector margin/padding reset
But now we don’t have any spacing in between paragraphs, so somewhere below our universal selector reset, we’ll declare the way we want our paragraphs to look like. You can do it a number of ways – you can put margins (or padding) at the beginning or top of your paragraphs, or both. You can use ems as your units or pixels or percentages.
What’s important is that we choose the way the browser will render it. For our example, I chose to add margins (instead of padding) both at the top of the paragraphs and at the bottom – but that’s my choice, you may want to do it differently.
Here’s what I used:
* { margin:0; padding:0; }
p { margin:5px 0 10px 0; }
Example 3: Declaring a style rule after the universal selector.
Note: The example I used for discussion is a simplified example. If you only used paragraphs for your web pages and no other elements, you wouldn’t want to reset your margins to 0 using the universal selector only to declare a style rule right after it for your paragraph. We’ll discuss this more fully along with other best practices later on down the page.
Shortly thereafter – CSS guru Eric Meyer further built on the concept of resetting margins and paddings. In Eric Meyer’s exploration, he discusses Tanek’s work undoing default HTML styles (which he called undohtml.css) which not only resets margins and padding, but also other attributes like line-heights, font styles, and list styles (some browsers use different bullets for unordered list items).
After many iterations and refinements, we come to a wonderful solution called CSS Reset Reloaded CSS Reset, which not only makes this CSS reset method more accurate than the universal selector method by using higher specificity by naming all possible HTML tags (because the universal selector fails to apply the reset to all HTML tags), but also sets default values for troublesome elements like tables (in which the border-collapse attribute isn’t rendered consistently across browsers).
Of course, there are other methods of resetting your CSS (such as Yahoo!’s YUI Reset CSS which I currently use on Six Revisions), and you can roll your own based on your preference and project needs.
SITE: http://sixrevisions.com/css/css-tips/css-tip-1-resetting-your-styles-with-css-reset/
NOTE: I am kind of new at this, so please bear with me.