I've got a problem when using scriptaculous Effect.Appear() as a menu option, I wanted to create a flash-like menu but with pure css and scriptaculous.
I've got my desired outcome which is when I hover over a box, a text (with display: none;) appear above it and the box changes height and background color. Now the problem is that when my mouse move extremely fast and crazy over the box, the text remains (as if it was selected).
What I want is that as I hover the text appear, and if my mouse of out, the text disappear.
My codes
function ShowEffect(element){
new Effect.Appear(element,
{duration:0.3, from:0, to:1.0, queue: 'front'});
}
function HideEffect(element){
new Effect.Appear(element,
{duration:0.2, from:1.0, to:0, queue: 'end'});
}
The Divs
<div class="lefty" style="width: 90px; margin-right: 2px;">
<div style="display: none;" id="clicker2text">ABOUT US</div>
<div style="width: 90px;" onmouseover="ShowEffect('clicker2text')" onmouseout="HideEffect('clicker2text')"></div>
</div>
Any help is appreciated :)
Instead of using the onmouseover attribute on the div use an event observer like this
$$('.lefty').invoke('observe','mouseover',ShowEffect);
$$('.lefty').invoke('observe','mouseout',HideEffect);
But I think this will work better as you are watching for the events that bubble up to body and then acting on it if is the right element.
$$('body').first().observe('mouseover',function(e){
if(e.findElement().hasClass('lefty'))
{
ShowEffect(e.findElement());
}
else
{
//trigger for all of the menus just to make sure the are hidden
//instead of stuck on
$$('.lefty').each(function(element){
if(element.visible())
{
HideEffect();
}
});
}
});
This should give you some ideas - see if it solves your problem.
Related
Is there any way to make the new "Sign In With Google" button responsive? Specifically, vary the width based on the width of the containing element? I'd really just like to set the width to 100%.
I'm aware I can set the data-width attribute but this sets it to an explicit width and doesn't update if you change it after the initial script load - you have to reload the whole script to resize the width.
This isn't a perfect solution but it works for us. We're using Twitter Bootstrap.
The new JavaScript library has a renderButton method. You can therefore render the button multiple times on one page passing different widths to each button using something like this (400 is the max width allowed by the library)
private renderAllGoogleSignInButtons(): void {
this.renderGoogleSignInButton(document.getElementById('google-signin-xs'), 400);
this.renderGoogleSignInButton(document.getElementById('google-signin-sm'), 280);
this.renderGoogleSignInButton(document.getElementById('google-signin-md'), 372);
this.renderGoogleSignInButton(document.getElementById('google-signin-lg'), 400);
this.renderGoogleSignInButton(document.getElementById('google-signin-xl'), 400);
}
private renderGoogleSignInButton(element: HTMLElement, width: number){
const options {
type: 'standard',
....
width: width
};
google.accounts.id.renderButton(element, options);
}
We then use the display classes from bootstrap to hide/show each button depending on the size.
<div class="mx-auto" style="max-width: 400px">
<div class="d-none-sm d-none-md d-none-lg d-none-xl">
<div id="google-signin-xs"></div>
</div>
<div class="d-none d-none-md d-none-lg d-none-xl">
<div id="google-signin-sm"></div>
</div>
<div class="d-none d-none-sm d-none-lg d-none-xl">
<div id="google-signin-md"></div>
</div>
<div class="d-none d-none-sm d-none-md d-none-xl">
<div id="google-signin-lg"></div>
</div>
<div class="d-none d-none-sm d-none-md d-none-lg">
<div id="google-signin-xl"></div>
</div>
</div>
We use a wrapper container with mx-auto and a max-width to center the buttons but you don't have to do this.
Our actual implementation is slightly different than the above as we're using Angular and the button is a component but you can get the idea from the above.
The only drawback with this method is that the "personalized button" doesn't seem to display for all rendered buttons but it doesn't seem to affect their functionality.
This answer is based on the new Google Identity Services.
You could try listening for a resize in the window using the resize event, then re-render the Google Sign In button on change. The assumption here is that the container will respond to match the window size:
addEventListener('resize', (event) => {});
onresize = (event) => {
const element = document.getElementById('someContainer');
if (element) {
renderGoogleButton(document.getElementById('googleButton'), element.offsetWidth); // adjust to whatever proportion of the "container" you like
}
}
renderGoogleButton(element, width) {
const options = {
type: 'outline',
width: width
}
google.accounts.id.renderButton(element, options);
}
I've also had better results when the button is centered, not left aligned. The following in Bootstrap:
<div class="d-flex justify-content-center">
<div id="googleButton"></div>
</div>
NB: The max width for the Google button as of the time of writing is 400px, so bear that value in mind as the limit.
I did a workaround, and it worked for me. As I needed the button to have 100% width in mobile devices.
If you have another element on the screen that behaves the same way you need (like having its width 100%), you can select it using a querySelector, and get its width element.clientWidth, after this you can pass the width to the renderButton function provided by google.
But this solution is not valid if you would like the button to change its size on resizing.
I used transform: scale like this in the CSS:
.sign_in_btn_wrapper {
transform: scale(1.5, 1.5);
float: left;
margin-left: 20vmin;
font-weight: bold;
}
Then, instead of wrapping it as I intended, I found that it was fine to just add the class directly to the goog div:
<div class="g_id_signin sign_in_btn_wrapper"
data-type="standard"
data-shape="rectangular"
data-theme="outline"
data-text="signin_with"
data-size="large"
data-logo_alignment="left"
data-width="250">
</div>
By fiddling with combinations of data-size and data-width, along with the scaling factors, I was able to make it the size I wanted. You can use CSS media queries to adjust the 'transform: scale' values so that it is 'Responsive' to the display size of the user's device. You could also use other trickier methods by having JS tweak variables in your CSS that are then used to set the scaling factors.
Good luck. You'd think it'd be in the interest of these big 'sign in with' providers to get together a coordinating working group to make it easier for web site developers to make all the sign-in buttons the same damn size -- you know they'd rather not have their button come out smaller, and pages look better when things are uniform. And what's with only having dimensions in pixels? At least give us vw, vh, and my favorite: vmin. (Using vmin to set things like font size means you can often skip more tedious RWD contortions and call it good enough.) </end_rant>
I have div box which contains two items. One is under the other one. So when the lower item is hover I'd make it animated and slide it out of the top item.
<div id="main">
<div id="box"></div>
<div id="item"></div>
</div>
With my knowledge in CSS3 I could only make a transition for item to slide it out in hover. But I want it happen when #main is hover not #item.
Have a look at the them please.
http://jsfiddle.net/sL3Pw/
You are correct, there is no way currently to style a parent element of a child in pure CSS. You can use JavaScript as a way to achieve the desired effect.
(UPDATE)
You can achieve this in JavaScript by doing the following (DEMO: Fiddle)
JS
This should run onload or else it will not work.
// On Hover
document.getElementById('main').onmouseover = function () {
document.getElementById('item').classList.add("to-left"); // Add To Left Class
}
// OnMouseOut (Not Hover)
document.getElementById('main').onmouseout = function () {
document.getElementById('item').classList.remove("to-left"); // Remove To Left Class
}
Please remember to change the IDs of the elements if needed.
CSS
Add this CSS class to your CSS
.to-left {
margin-left: 60px;
}
And your HTML stays the same. This should get what I believe your desired result is. Let me know if this works for you.
I have the following HTML:
<ul id='x'>
<li>
<a class="document-web1" data-href="/x">x</a>
</li>
<li>
<a class="document-web2" data-href="/y">y</a>
</li>
</ul>
I set up this event:
$("#content-button-panel")
.on('click', 'a', function (event) {
event.preventDefault();
var $link = $(this);
getContentAjax($link);
});
This works but when my cursor moves over the text it changes
to a vertical text select bar instead of a pointer. Is there
some way that I can make the cursor always appear as an
arrow when it's over any part of the li element?
If you just want to change the cursor you can use this in your CSS:
li
{
cursor: default;
/*cursor: pointer;*/
}
Plus if you’re not really sure which property render which cursor, check the following link it will clear your confusion.
CSS Cursors
after read your title its looks like you want
li:hover{
cursor:pointer;
}
the above will make cursor like
but after reading your whole question
li:hover{
cursor:default;
}
and this will will show cursor like
also check this its pretty cool with live view
now i would suggest you to write relevant title
I am a little new to jquery myself, but I believe you have to use onhover or onmouseover rather than on click.
You can use the cursor property of css, that is css(cursor, pointer), for example
The css property you want is pointer. setting it to the default value will force the browser to render the pointer as an arrow even though there is no href attribute on the a element.
#x a {
cursor:default;
}
I have two instances of where the Like Button is not "listening" to the width I specify in the XFBML code.
It LOOKS fine, but something is mysteriously causing the like button to be extra wide and force the browser to do horizontal page scrolling even though the entire like button is within the page.
Example:
[EXAMPLE REMOVED] - see the sidebar. I have to set the entire BODY to ignore overflow-x. If not, the like button causes a ton of extra pixels out there (but I can't see them with Firebug). I know this is the problem because if I remove it, then it looks fine.
Example 2:
Screenshot of Example - In the header, I had to move the margin over so far to the left, and I wanted it to be in the top-right corner. Play with the CSS for fbheader in firebug and you'll see.
The code I'm using there:
<div class="fbheader">
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'your app id', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
<fb:like href="http://www.example.com" send="true" width="300" show_faces="false" font="arial" colorscheme="dark"></fb:like>
</div> <!--// End fbheader -->
Any ideas why this is happening?? Can anyone help? It seems like a bug with the XFBML.
I had the same problem, but none of the suggestions above worked for me.
I found another solutions that did work, see http://britishinside.com/archive/2011/07/07/Facebook-Like-Button-Bug.aspx
Simply include this in your stylesheet:
#fb-root > div { left:0 }
It's a bug with facebook. Why don't you just update your fbheader class as follows:
.fbheader {
overflow:hidden;
}
That should solve your issue ..
Good luck..
I had the same problem. I found the problem was to do with a bug in Facebook's reset div. I fixed it like this:
#fb_like .fb_reset {
/* fix for Facebook bug which causes horizontal scrollbars in browser */
display: none;
}
I fixed the issue using #fb-root { display: none; }
You could try alter the width of fbheader class in css file, or even better, the parent element.
Sometimes when we use internal elements that cause the parent to get wider, the horizontal scroll get visible.
Another tip is to reposition the button, or set the margins and padding narrow.
My solution is to apply this to the parent container:
.my-parent-wrapper {
display: inline-block;
overflow: hidden;
}
skipping overflow rule will work too
I've just had the same problem, using an iFrame script from facebook for a double "share" and "like" button. I hadn't specified a width in pixels. Fixed it by getting a replacement script, but this type specifying a width of 120 pixels in the box provided.
I would like to style my selected button.
I would like to display a light-blue border around the image of my selected button to show which page the user is on. (or just use the same hover image as the selected button image when the button is pushed.)
I didn't have success with the css link selectors :visited, :focus, or :selected.
Does this require a javascript solution?
thanks for any pointers!
i usually just a extra class name called selected
<div class="button selected">Button 1</div>
<div class="button">Button 2</div>
.selected {
border: 1px solid #0000ff;
}
It depends on how you display your page (using ajax or refresh on every click). If you are using javascript to load the page content than you just put an extra classname using javascript when the button is clicked.
you should use :active pseudo class in css to achieve what you want.
jQuery Solution with your CSS
You would probably want to check first if it is selected, that way this solution works with things like Twitter Bootstrap, where you can make any element act like a button:
$(function () {
$('div.button').click(function(){
if ($(this).hasClass('selected') {
$(this).removeClass('selected');
//Insert logic if you want a type of optional click/off click code
}
else
{
$(this).addClass('selected');
//Insert event handling logic
}
})
});
You will, in fact, need to use javascript. I did this in a project a while back, by iterating through the links in the navbar, and setting a class called "selected" on the one the user is currently visiting.
If you use jQuery, you can accomplish it like this:
$(function() {
$('#navbar li').each(function() {
if ($(this).children('a').attr('href') == window.location.pathname)
{
$(this).addClass('active');
}
});
})
The CSS Pseudo-selector :active won't still be active after a pagereload.