Is there any way to align google plus button to right? It seems that g+ button holds some place in case there were more digits. It would be nice if sulution could be using only css/html - no javascript.
update It apears that google has changed a little bit api of 1+ button since yesterday, but still it seems impossible to align it to the right.
update 2
Question has been asked on Aug 24 '11. Since then Google+ has changed several times. There's no need to spam answers to this post anymore (repeated, and same answers!). Options you all suggest didn't existed at the time. Check out parameters on google+ documentation webpage: https://developers.google.com/+/plugins/+1button/?hl=pl#plusonetag-parameters
Nowadays you just add data-align="right" to your <div>. For example:
<div class="g-plusone" data-align="right" data-size="medium" data-href="http://www.mywebsite.com"></div>
That will keep the contents of the <iframe> aligned to the right.
If you would like to align the +1 button right, you should either use the 'tall' form factor, since it expands up, or configure the +1 button to not display the count. Either of these will remove the slack space for numbers on the right side. The documentation explaining how to do this can be found here: http://code.google.com/apis/+1button/#button-sizes
Now that the padding is gone on the right side you can use CSS to align the button.
Add the following attribute to the g:plusone tag:
align="right"
Got the solution from
https://developers.google.com/+/plugins/+1button/#button-sizes
Set the align attribute to right for the +1 button tag.
<g:plusone align="right"></g:plusone>
The easiest solution I have found is to just wrap the plus one button div in a container, give the container a class and style that to float how ever you require.
<!-- Google +1 button -->
<div class="plusonealign"><div class="g-plusone" data-size="medium" data-align="left"></div></div>
.plusonealign {
float: left;
}
encountered this exact problem yesterday. wrapped the namedspaced plus one tag in a div and floated right.
you could always use a stylesheet to override the inline styles that google send down the wire
so for markup like this:
<div class="myPlusOneWrapper">
<div id="theActualPlusOneWrapper" style="whatever google send down the wire">
<!-- blah -->
</div>
</div>
you could have this CSS:
.myPlusOneWrapper
{
float: right;
}
.myPlusOneWrapper > div
{
width: auto !important;
}
the width will then adapt to be as wide as it needs to be, and will take precedence over google's inline style
JS Fiddle
I would try to put the button into a div. Then I would make this div smaller than the button to cut away the right part of the button. You need to adjust the position and overflow options in your css.
Related
I want to adjust the height of some lines of texts by css-file. But I can't change css property and value directly, because the contents are displayed with Fluid of TYPO3.
This is my codes in a HTML-file:
<!-- for left side -->
<div class="anreisetag-zeit anreisetagabstand">
<f:for each="{anreisetag}" as="itemAnreisetag" iteration="iteration">
{itemAnreisetag.data.tx_anreisetag_zeit -> f:format.html()}
</f:for>
</div>
<!-- for right side -->
<div class="anreisetag-text">
<f:for each="{anreisetag}" as="itemAnreisetag" iteration="iteration">
{itemAnreisetag.data.bodytext -> f:format.html()}
</f:for>
</div>
Now my contents are displayed in frontend, but the height of the textline is different. My problem now is:
I want to adjust the height between the line of "anreisetag-zeit / anreisetagabstand" and "anreisetag-text", so that they have same height.
My idea:
I have an idea that I add a field in Backend which it has a type="input". I added this:
The field has a variable tx_anreisetag_zeit_abstand.
Also, every item has class name like this:
My final idea is that if I give a value in the input-field tx_anreisetag_zeit_abstand, then "margin-bottom" of the <p class="text-center"> is changed with the new value. Now anreisetagabstand p has "margin-bottom: 16px;". I want to change these value "16px" for example to "38px" from Backend.
in my CSS file now:
.anreisetagabstand p{
margin-bottom: 16px;
}
The class anreisetag-text will be changed anything. Just the style of "p element of anreisetag-zeit" or "anreisetagabstand" musst be changed. I've already defined some design with the calssname "anreisetag-zeit", so I want to use the classname "anreisetagabstand" to adjust the hight.
How can I realize this? If I don't use Fluid, then I can adjust easy...
Maybe can I change the css property and value from a JavaScript file to operate DOM? I've already tried it, but I can't change my css property and value. I think there are some error in my codes:
window.onload = function() {
var anreisetagzeit = document.getElementsByClassName('anreisetagabstand');
anreisetagzeit += ' p';
anreisetagzeit.style.marginBottom = '38px';
}
Adding:
If I adjust my texts in my richt text editor, then I have to give some spaces and I have to check the frontend every time if the height or distance between the time and the description:
Furthermore, I can't give spaces, if I use "list" in a rich text editor. I have to give some space on the left side of the point to display the list-items on the right side :
If I display them in frontend:
I hope someone can give me some advices. Thank you.
trying to align your text and time to be on the same horizontal level is proably more easy by changing the HTML-structure instead of playing arount with linebreaks and CSS.
CSS-based solutions will maybe work on a static viewport, but as soon as the textarea grows or shrinks the number of lines of text will also change and therefore not be properly aligned again.
If it is within your possibilities i would recommend to restructure your Template to something like this:
<div class="anreisetag-plan">
<f:for each="{anreisetag}" as="itemAnreisetag" iteration="iteration">
<div class="anreise-item">
<div class="anreisetag-zeit">
{itemAnreisetag.data.tx_anreisetag_zeit -> f:format.html()}
</div>
<div class="anreisetag-text">
{itemAnreisetag.data.bodytext -> f:format.html()}
</div>
</div>
</f:for>
</div>
With this structure you should be able to achieve your desired output alot more easy than before.
I'm trying really hard to replicate what happens here angular theme on Wordpress.
I've been able to get isotope to filter the post_thumbnails display them and it animate great but what I'm stuck on is when clicking an image or link the content of that post/portfolio gets displayed in a new div. Ideally in place and pushing boxes out the way so if you're on a mobile you don't have to scroll to the top.
Any pointers to get me started would be great, just can't find anything like this anywhere and think it would be very useful to others :)
Thanks
Actually that can be achieved quite easily. Basically you'll merely have to add a click handler to all Isotope items. The handler has to figure out which element has been clicked (e.g. by checking class names of the clicked item, but of course there are numerous ways) and then add the respective content to your div element.
If the content has to be shown in place, it's even easier. You can simply add the preview and the full content to the same Isotope item, but hide the full content by default:
<div class="item">
<div class="preview">...</div>
<div class="full">...</div> <!-- hidden with CSS -->
</div>
Then add a click handler to all Isotope items:
$(".item").click(function(){
$(this).toggleClass("big");
$("#container").isotope("reLayout");
});
By calling .isotope("reLayout") the other items are pushed out of the way when the clicked one expands.
Finally you need some basic CSS rules making div elements with .big bigger, hiding .full by default, but showing it when .big is set in the parent div. In that case .preview has to be hidden of course; this can all be done with CSS, no JavaScript/jQuery required.
Ok, it's a bit cumbersome to explain - I guess an example says more than a thousand words: JSFiddle
Of course that's just a very basic example, but hopefully it explains what I meant. ;)
I have a link at the bottom of my page with
<a href="javascript:scroll(0,0)">
Online Marketing
</a>
To scroll to top of page but it makes the text blue and underlined how do i add some code to remove text deceration to it?
i tried a href="javascript:scroll(0,0)" style="text-decoration: none; color:#FFFFFF;">
but then the scroll to top stopped working does anyone now any way to get round this to remove the text deceration using code on the specific element?
Your code looks right...which is odd. Perhaps try assigning the scroll button to a CSS class.
In your style sheet add
a.StandardTextLink:link, a.StandardTextLink:active, a.StandardTextLink:visited {text-decoration:none;color:#FFF;}
Then in your html
Scroll to top
Hopefully that'll sort it.
C
You could try not using an element that has default styles:
<span onClick="scroll(0,0);" style="cursor: pointer;">Online Marketing</span>
Check spelling of your style-attribute, especially quotas. Expression should work.
This problem was not solved.. it was just evaded.. so dont use this as reference
what i have is
<div>
<img onclick='this.style.display="none";this.parentNode.getElementsByTagName("div")[0].style.display="block";this.parentNode.getElementsByTagName("div")[0].style.width=this.offsetWidth+"px";this.parentNode.getElementsByTagName("div")[0].style.height=this.height+"px";' src='http://static.***.pl/cache/***.pl/math/cafc682a15c9c6f1b7bb41eb004d6c45935cbf06434221f7201665f85242cb94.png'/>
<div onclick='this.style.display="none";this.parentNode.getElementsByTagName("img")[0].style.display="inline";' style='display:none'>
<pre style='width:100%;height:100%;'>
\lim_{t\to\infty}\int\limits_1^{t} \frac{1}{x^2}\,dx=\lim_{t\to\infty}\left(-\frac{1}{x}\right)\bigg|_1^t=\lim_{t\to\infty}\left(-\frac{1}{t}-\left(-\frac{1}{1}\right)\right)=\kappa=1880154404
</pre>
</div>
</div>
yes i know its ugly but well..
my problem is when i click the image it does what i want but if i then click the div it only works if i click on the text and i want it to work for the full div !
i dont want to use document.getElementById etc...
there will be multiple instances of this code and it will be in unknown places.
i really dont want to write up bloated code to do this (this includes jQuery,flash,.NET, Zend Engine etc etc...)
my question is simple :
why the hell does it work only if i click on text and how to fire onclick for the whole div
In your original Javascript action, you were setting the width and height of your div to zero, which means that there is no area to click on.
Here is a demo: http://jsfiddle.net/audetwebdesign/ndKqM/
which should demonstrate the fix. I added some background color and padding to show the dimensions of the various boxes.
I removed the parts of the JS that calculated width and height and that fixed the issue.
If you click on the lime green area that holds your text, the action works.
Unless there is some other reason, you don't need to adjust width or height.
It's hard to tell what behavior you really want.
You are setting the image to display:none, and then you set the style.height and style.width of the sibling div to image.height and image.width. So - those will both be zero (as display:none is set for the image).
Do yourself a favor and set background colors or borders for your divs so you can see what's going on as you code.
Use an A tag with your onclick event and a null URL href="javascript://" instead of a DIV
On the first click, it works as expected:
the class is changed
and the html content is changed from 'Show...' to 'Close...'
the content area is expanded with the slideDown effect,
Good so far.
On the second click, ...
the class changes
the html content is changed from 'Close...' to 'Show...'
The content area does NOT go away as expected.
On the third click, ...
the class is changed
the html content is changed
the already-shown content is re-shown with the slidedown effect.
So everything is working except for the 2nd click when the content is supposed to be hidden again.
Here's the jQuery:
-
$('.open_user_urls').live('click', function() {
$('#user_urls').slideDown('slow');
$(this).addClass('close_user_urls');
$(this).removeClass('open_user_urls');
$(this).html('Close Search History');
return false;
});
$('.close_user_urls').live('click', function() {
$('#user_urls').slideUp('slow');
$(this).addClass('open_user_urls');
$(this).removeClass('close_user_urls');
$(this).html('Show Search History');
return false;
});
Here's the HTML it's acting on:
<h3 class='open_user_urls'>Show Search History</h3>
<div id='user_urls'>
// an OL tag with content
</div>
And the only applicable CSS:
#user_urls { display: none; }
EDIT - I replaced my jquery code with functionally equivalent code supplied in an answer below, but the problem persists. So the cause must be elsewhere. I do recall this code working originally, but then it stopped. I'm stumped. Time to strip everything else out piece by piece...
EDIT 2 - Since the bug must be elsewhere, I'm accepting a code improvement for my jquery as the answer. Thanks.
Edit 3 - Found the source of the problem.
Inside the #user_urls div I have an series of OLs with the following css:
.url_list {float: left; width: 285px; list-style-position: outside; margin-left: 25px;}
Each OL contains a list of 20 urls and is meant to display in as many multiple columns as required to display all the URLs.
Removing the float: left; on these OL tags causes the problem to go away.
So having a float on the content contained in the DIV thats showing and hiding is causing it not not hide at all. Why would this happen?
EDIT 4: Adding a inside the #user_urls DIV allows the hiding action to work properly.
Perhaps something like this would be simpler?
$(".open_user_urls").toggle(
function () {
$(this).text("Close Search History").siblings(".user_urls").slideDown("slow");
},
function () {
$(this).text("Show Search History").siblings(".user_urls").slideUp("slow");
}
);
The toggle function is designed for precisely the scenario you're encountering.
To reiterate the problem and resolution to this question...
Inside the #user_urls DIV were a series of OL tags, each floated left. It was the float that was causing the problem.
Adding a <br style='clear: left;' /> inside the #user_urls DIV fixed the problem.
From what I've found, jQuery needs to have the height style set in order to slide it correctly. A work around I've used is to set the height before you slide it closed.
$('#user_urls').css('height', $('#user_urls').height() + 'px');
After you set it once, it should work correctly from then on. Check out this tutorial for a more detailed explanation.
Since this question was opened, jQuery have put in a fix for this themselves.
Updating to the latest version of jQuery solved the problem for us with no CSS changes. (jQuery 1.4.4 as of Dec 9th 2010)
Found via discussion on Google Groups in turn found from d12's answer. According to duscussion, in some jQuery 1.3x versions this bug affected several actions, slideUp, fadeOut, and toggle, if the element being hidden/slid up is a a non-floated parent containing floated children.
I think Conor's answer might put you on the right track. I might also suggest slideToggle and toggleClass:
http://docs.jquery.com/Attributes/toggleClass
http://docs.jquery.com/Effects/slideToggle
I could be as easy as:
$("h3.open_user_urls").click(function () {
next("div#user_urls").slideToggle();
});
I can't duplicate your bug. I used your exact code and I cannot replicate your issue.
This must be a script error from a different place in your JS code.
Thanks for this question. It really got me on my way figuring out the problem toggling an element with floated children.
Another resource that really helped and explains the behavior a bit can be found
on this Google group discussion.
Putting a non breaking space in your div is another solution similar to what The Reddest suggested that worked for me on a similar issue.