I'd like to know if the issue I see is just for my site or if this is a known issue.
I have some social widgets that align pretty well, but for some reason the PlusOne is not aligned correctly.
I used Firebug to compare it with the Facebook Like widget, and according to the CSS, they are both exactly the same height and neither have margins or padding. Their css looks identical.
<div>
<fb:like layout="button_count" show_faces="false" width="90" action="like" font="verdana" colorscheme="light"></fb:like>
<g:plusone size="medium"></g:plusone>
<script type="text/javascript" src="http://w.sharethis.com/button/sharethis.js#publisher=d9550e2f-f25a-4e2e-ae45-7a51cf7e3d46&type=website&buttonText=Share%20item!&embeds=true&style=rotate"></script>
<font face='Verdana, Arial, Helvetica, sans-serif' size='1'> Email item</font>
</div>
Actually I have a link where the same thing i happening: http://news.makemeheal.com/celebrity-plastic-surgery/jennifer-aniston-weighs-on-prince-williams-hair-loss/ (if necessary, reduce your window size so Fbook and G+ are on the same line)
Use this:
<span style="position:relative; top:3px">
<div class="g-plusone" data-size="small" data-annotation="none"></div>
</span>
Had same issue. I put the Google+ code in a <div> and used CSS to limit the max-height property of <div> to 70px and it worked.
Put a div (class=froogle) around the +1 button, float them all and then style as you want. It worked for me:
.facebook-like, .twitter-share-button, .froogle {
float: left;
margin-right: 10px;
}
You could try using relative positioning, e.g. add the following CSS to the G+ button:
position: relative;
top: 5px; /* Or whatever looks right */
Although, while it may fix your problem it doesn't exactly show the cause of the issue.
Related
quick question from a complete JS noobie.
On a site, I have an image of a product consisting of basically two parts, then I have a row of small .png thumbnails .colorthumbnail of those separate parts with transparent backgrounds. In the CSS I set it so that when hovering the thumbnails, it enables the .colorzoom class that overlays a big version of the same color option over the original product picture using position: absolute.
HTML:
<div class="coloroptions">
<div class="j210desertsand">
<div class="colorthumbnail">
<a href="javascript:void(0)" id="colorpicker">
<img src="img/products/colors/j210desertsand.png"></a>
<span class="colorzoom"><img src="img/products/colors/j210desertsand.png">
</span></div></div>
<div class="j210platinum">
<div class="colorthumbnail">
<a href="javascript:void(0)" id="colorpicker">
<img src="img/products/colors/j210platinum.png"></a>
<span class="colorzoom"><img src="img/products/colors/j210platinum.png">
</span></div></div>
</div>
The <div class="j210desertsand">classes are simply there so I can easily hide a single color option using CSS and the next colour will line up. The anchor points are there cause after some research I found I should actually make the thumbnails clickable and with a href="javascript:void(0)" they don't actually link anywhere or reload the page.
CSS: (Excuse the mess, I'm inexperienced)
.coloroptions {
width: 60%;
margin-left: 40%;
}
.colorthumbnail {
margin-left: -45%;
}
.colorthumbnail img {
float: left;
max-width: 16%;
padding-right: 5px;
position: relative;
}
.colorthumbnail .colorzoom {
position: absolute;
width: 253%;
margin-top: 6.9%;
display: none;
margin-left: -3.6%;
}
.colorthumbnail:hover .colorzoom {
display: block;
}
Now this appears to work fine, but because there are two different parts I want to give the user the ability to combine color options and obviously you can't hover over two images at once. After some more research I found that I need Javascript to force the :hover state on click. But I'm gonna be honest, I have no idea what I'm doing. This is what I have:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<!-- -----------------------JSQuery------------------------- -->
<script>
$("#colorpicker").click(function() {
$('.colorthumbnail:hover').toggleClass('colorthumbnail:hover .colorzoom');
});
</script>
<!------------------------ JSQuery End -------------------------->
However this does not appear to be working. Did I get the linked script in the <head> right? It did work alright with the 'Hello World' pop-up test. Did I get the classes in the script right? I'm a little stuck and help would be appreciated! Much love for the community.
Try adding your code like this:
$( document ).ready(function() {
$("#colorpicker").click(function() {
$('.colorthumbnail:hover')
.toggleClass('colorthumbnail:hover.colorzoom');
});
});
When trying to use jquery you need to make sure the page is loaded so it can perform dom manipulation.
source: https://api.jquery.com/ready/
Here is a jsFiddle demo: https://jsfiddle.net/Lv571n1w/
If you inspect element you can see it toggle the classes when clicked.
I'd like to implement this situation: user hovers link and on his screen appears div with additional information.
There is no problem, to generate div with absolute position, populate data and display it with jQuery, but the problem is with maintainability. I want to separate logic and view. What if I'd like to change page layout in the future? How programmer will know, that some part of page exist in JavaScript file?
Is it some elegant way to separate view (in my case HTML structure) and logic (data obtained from server in JSON using JS script) and combine them? Is it any ... templating engine or something like that in JavaScript?
You can generate your HTML entries like this
<a>
My Cool Link
<div class="tooltip">
This link is awesome!
</div>
</a>
And use CSS to style the tooltip:
(The important part is a:hover .tooltip and everything except background on .tooltip
a {
display: inline-block;
}
a:hover .tooltip {
visibility: visible;
}
.tooltip {
position: relative;
top: 20px;
left: -50%;
display: inline;
visibility: hidden;
background: #eee;
}
Example: http://jsfiddle.net/4K7sB/
Then you just need to populate the elements with the correct text using JS.
Bootstrap does all this and more: http://getbootstrap.com/javascript/#tooltips
To put it in:
$('#example').tooltip(options)
And the markup being:
<div class="tooltip">
<div class="tooltip-inner">
Tooltip text here!
</div>
<div class="tooltip-arrow"></div>
</div>
Go to the link for a more detailed explanation on how to implement it
You can alter the Title="information" dynamicaly by some program or script and use the following code to display it as a tool tip,found it on net
http://www.webdesignerdepot.com/2012/11/how-to-create-a-simple-css3-tooltip/
Just add title attribute in div tag like below code....
<div title="First Div">StackOverFlow StackOverFlow StackOverFlow
StackOverFlow StackOverFlow StackOverFlow StackOverFlow StackOverFlow
StackOverFlow </div>
</div>
<br /><br />
<div title="Second Div">StackOverFlow StackOverFlow StackOverFlow
StackOverFlow StackOverFlow StackOverFlow StackOverFlow StackOverFlow
StackOverFlow </div>
</div>
just copy paste and check.
I am trying to remove the css of an image. My actual code doesn't include this CSS, but it comes from a generate code. I can't touch that neither modify anything that is related to the generared code.
This is my real code
<div class="bubble">
<img id="one" src="/static/webupload/MyronArtifacts/images/descarga.png" style='float: left;' alt="Quotes">
<p id="comment11">I was very impressed with the unique design and high quality of this pen.
</p>
</div>
<div class="quote_speech">
<div class="name" id="author11">By PEDE</div>
<div class="company" id="company11">September 25,2013</div>
</div>
This code is added to a div from the generated code name rightCol
And there is a CSS class declare the following way
#rightCol img{
display:block;
float:none;
margin:0 auto 0 auto;
position:relative;
border:0;
padding:3.5px 0;
backgroun-color:#fff;
width:166px
}
The issue is on width:166px.
The bad new for me is I can't remove it manually(Generated code).
So I was thinking to use javascript for this.
using this $('#one').hasClass('img')
But this returns me false.
I did a demo getting in JS FIELD getting the CSS. DEMO
If I remove the 166px from the CSS it works, but that solution is not available for me. And the has class returns me false. Wondering why?
Thanks in advance
Actually you can use !important to override this behavior but it is better to declare more specific rule rather than using !important
#rightCol img#one {
width: auto;
}
Demo
Hi I checked your demo page and just added one line to your document.ready function.
$(document).ready(function () {
$('#one').css('width', 'auto');
randomtip();
});
check and let me know if still problem exist.
So I'm making a gallery of fabrics and backgrounds for letters for a fraternity/sorority store in my college's town. If you don't know what I'm talking about, this is a fabric letter. You can see how it has a white outline (background) and a red inside (foreground). WELL, I want to make it so you can change both the foreground and background, simply by clicking it's similar image.
This is what I have so far
<script type="text/javascript">// <![CDATA[
function changeImage(filename)
{
document.mainimage.src = filename;
}// ]]></script>
with these for each fabrics:
<a href="javascript:changeImage('/wp-content/themes/collegiateconnectionbg/images/fabrics/foregrounds/37.jpg')">
<img src="/wp-content/themes/collegiateconnectionbg/images/fabrics/foregrounds/37.jpg"
alt="" width="100px" height="50px" /></a>
I really like how this works, but it's only good for one layer. Is there anyway I can add a layer below it, but still make it show at the top of the page? I know I'll have to use photoshop and transparency for both options, thats no problem, but I wanted to make sure I can do this before I start creating 600+ images.
I know I can play with z-index and css, but since I'm using wordpress the one example I read about here wasn't working or I didn't completely understand it, and messed up my entire page.
Also here's my tester webpage to see the current code in work. (if you click the navy&white stars image, you can see a very rough makeshift "A")
Thanks in advance!
I think I've got a solution for you.
Live Demo: http://jsfiddle.net/hM6dj/4/
More or less, you just need to create some images of the letters and leave their insides transparent.
Example
You'll notice that the area around the 'A' is white while the area within the lines of the 'A' is transparent.
Code
Then all you need to do is place this image in front of another image. The image in the background will bleed through the transparent image on top resulting in an 'A' with a pattern.
NOTE: I used data urls for the foreground letter so I wouldn't have to host the images anywhere. You can read about that here.
HTML
<div class='container'>
<div class='foreground foreground-Black'> </div>
<div class='background background-Cow'> </div>
</div>
<h2>Foreground Options</h2>
<input type='button' class='btnforeground' data-class='foreground-Black' value="Black" />
<input type='button' class='btnforeground' data-class='foreground-Red' value="Red" />
<input type='button' class='btnforeground' data-class='foreground-Green' value="Green" />
<h2>Background Options</h2>
<input type='button' class='btnbackground' data-class='background-Cow' value="Cow" />
<input type='button' class='btnbackground' data-class='background-Stars' value="Stars" />
<input type='button' class='btnbackground' data-class='background-Dots' value="Dots" />
JS
$('input[type="button"].btnforeground').click(function(){
$('div.container > div.foreground').removeClass().addClass('foreground').addClass($(this).attr('data-class'));
});
$('input[type="button"].btnbackground').click(function(){
$('div.container > div.background').removeClass().addClass('background').addClass($(this).attr('data-class'));
});
CSS
.container{
position:relative;
width: 200px;
height: 200px;
}
.foreground, .background{
width: 200px;
height: 200px;
background-repeat: no-repeat;
position:absolute;
z-index:100;
}
.background{
background-repeat:repeat;
z-index:50;
}
.background-Cow{
background-image:
url(http://www.collegiateconnectionbg.com/wp-content/themes/collegiateconnectionbg/images/fabrics/foregrounds/424.jpg);
}
.background-Stars{
background-image:
url(http://www.collegiateconnectionbg.com/wp-content/themes/collegiateconnectionbg/images/fabrics/foregrounds/48.jpg);
}
.background-Dots{
background-image:
url(http://www.collegiateconnectionbg.com/wp-content/themes/collegiateconnectionbg/images/fabrics/foregrounds/521.jpg);
}
/* Omitted due to StackOverflow character restrictions.
.foreground-Black{
background-image: url();
}
.foreground-Green{
background-image: url();
}
.foreground-Red{
background-image: url();
}
*/
EDIT
Using Google Chrome's Developer tools, it looks like you have some HTML intermixed with your JavaScript (notice the Paragraph Tags <p>, </p>).
Also I would wrap the jQuery events in a ready function (The JS Fiddle did this automatically so it wasn't obvious from the code example).
JS
$(function(){
$('input[type="button"].btnforeground').click(function(){
$('div.container > div.foreground').removeClass().addClass('foreground').addClass($(this).attr('data-class'));
});
$('input[type="button"].btnbackground').click(function(){
$('div.container > div.background').removeClass().addClass('background').addClass($(this).attr('data-class'));
});
});
EDIT2
A few things.
Your classes:
.foreground
.background
.foreground-Black
.foreground-Cow
etc...
have almost none of the properties set from my example. You should be able to take the css verbatim from the jsfiddle I provided.
You've named the container the class .viewer, but are referencing .container in your JavaScript. These elements must match for the JavaScript to be able to find the appropriate html element to update.
I'm trying to get the following effect in the jQuery Mobile framework:
|-------------------------------------------------|
|[button1] HeaderText/Image [b1] [b2] [b3] |
|-------------------------------------------------|
Where [b1], [b2] and [b3] are small image buttons in the Header.
Is this even possible currently?
just simple like this
<div class="ui-btn-right">
</div>
I have had troubles with this in the past. Trick is, force all of your links to be data-role="button" and wrap said links in a container with class="ui-btn-[left/right]" (respectively) This takes care of the traditional header button positioning and markup.
<div data-role="header">
<div class="ui-btn-left">
Button1
</div>
<h1>HeaderText/Image</h1>
<div class="ui-btn-right">
B1
B2
B3
</div>
</div>
Seems as if it is possible, check out this link:
Grouped buttons on the jQuerymobile Framework website.
This is how i did it. Some of the styling may not be necessary as the class used on the parent div should be enough.
<div data-type="horizontal" style="top:10px;position:absolute;float:right;z-index:10;display:inline;" align="right" class="ui-btn-right">
Team Call
Logout
</div>
In order to use your own image buttons on the right side you'll need to either float or position a div to the right, then add your buttons.
Then you'll need to override the jQuery mobile styles for those specific buttons to prevent them from getting the rounded, gradient button style that's automatically added by the library.
#header {
float: right;
}
#header .ui-btn-up-b,
#header .ui-btn-hover-b,
#header .ui-btn-down-b
#header .ui-btn-active {
border: 0px;
background: none;
}