Why hover over image pin it button won't appear - javascript

I've added the appropriate js link from pinterest in the appropriate place on my website, and checked all the known errors and still can't seem to get the pin it button to appear on the images of my site.
Thanks for any help. Here is the page live on my personal website:
http://lancebeaudry.com/lindsay/

I've noticed:
<div>
<img src="images/img1.jpg" class="slider-img">
</div>
<!----far away---->
<a class="..." title="Pin it!" data-pin-log="button_pinit_floating" data-pin-href="//www.pinterest.com/pin/create/button/?..." style="top: 110px; left: 1895px; z-index: 8675309; display: block;"></a>
Change that to:
<div>
<a class="..." title="Pin it!" data-pin-log="button_pinit_floating" data-pin-href="//www.pinterest.com/pin/create/button/?..." style="top: 110px; left: 1585px; z-index: 8675309; display: block;"></a>
<img src="images/img1.jpg" class="slider-img">
</div>

Fixing the slider can be kind of complicated, but I tell you about the process I'd follow.
Go to https://github.com/kenwheeler/slick/blob/master/slick/slick.js and download it locally.
The error is most probably related to the swiping effect, so you could try to set swipe: false, where you define the slider image container $('.slider-for').slick({
If that doesn't work reiterate the process with any variable set in the _.defaults or _.initials = { that deals with mouse events.
Furthermore, if that doesn't work identify the part of the code that detect the mouse and change the cursor look. Comment it out. If it works notify the author of your findings.
Hope it helps.

Related

Bootstrap modal moves to top on panel click

This is the question that I asked before but didn't get a problem-solving response. What's happening right now is that I am opening modal on the click of a panel. The modal opens with no problem but the problem occurs when I scroll to bottom and click a panel which moves to body scroll to top.
Here is the fiddle with the code.
Here is the panel code I am using:
<div class="panel">
<div class="panel-body" onclick="loadArticle('Metrico Release Date Announced', 'http://www.ign.com/articles/2014/07/16/metrico-release-date-announced')" data-toggle="modal" data-target=".bs-example-modal-lg">
<h4>Metrico Release Date Announced</h4>
<div class="news-item-background-image"></div>
<br>
<div class="article-info">
<p class="text-muted pull-left">
<img src="http://s1.wp.com/wp-content/themes/vip/techcrunch-2013/assets/images/favicon.ico" width="16px" height="16px">TechCrunch-1 hour ago</p><p class="text-muted pull-right category">Category</p>
</div>
<div class="clearfix"></div>
<p>Metrico will be released on August 5 in the US exclusively on PS Vita, according to an announcement on the PlayStation Blog. Digital Dreams also announced that Palmbomen, a Dutch synth composer who has been featured in games like GTA V worked with the studio to create the soundtrack for Metrico.</p>
</div>
<!--/span-->
</div>
In my CSS, I have added this:
body.modal-open {
overflow: visible !important;
position: fixed;
left: 0;
width: 100%;
}
And I know that this is the reason why is this happening because position:fixed with no top value I guess moves it top. If not this, then what should I do to fix the problem.
P.S the css above fixes the extra scrollbar issue that is also happening. So keep that in mind while answering. Just a tip! :)
So after a heck of time, figuring out the way to fix it, this is my workaround (inspired by the accepted answer here):
$('.bs-example-modal-lg').bind('hidden.bs.modal', function () {
$("html").css("overflow", "visible");
});
$('.bs-example-modal-lg').bind('show.bs.modal', function () {
$("html").css("overflow", "hidden");
});
The first bind regulates the event of modal when it hides and enables the scroll of whole page while the second one regulates the event when it shows up and disables the scroll of whole page.
Simple. :)

href location doesn't work

on the header of my site http://thetrashedvintage.com/ I use:
<div class="collections" onclick="location.href='http://thetrashedvintage.com/wool-collection';" style="cursor: pointer;">
<img src="http://www.thetrashedvintage.com/collections.jpg" alt="Collections" />
</div>
for make the div clickable, but when I click it redirects somewhere else, when I click on Collections, it redirects me to Login, the next div, any ideas of what I doing wrong?
Thanks for any help!
Your Collections div is being overlapped by your Login div
To fix this,
change your CSS from
div.login {
width: 50%;
right: -130px;
}
to
div.login {
/*width: 50%; <-- REMOVE THIS */
right: 115px;
}
try putting your div in an a like this
<a href="location where your stuff is"><div class="collections" style="cursor: pointer;"> <img src="http://www.thetrashedvintage.com/collections.jpg" alt="Collections" />
</div></a>
You have wrong CSS. If you have FireFox use Inspector, press Ctrl+Shift+C and goto with mouse on login and see margins div login (overlap collections) and goto more left there is margin collection. CSS with fixed position is bad idea.
Sorry for my funny english.

Slideshow - link slide to URL only working for last slide

I'm using lean slider: http://dev7studios.com/lean-slider/
I want to link each slide to a different url. I've noticed that only the code in the last slide gets executed (and also applied to all other slides). For instance, adding an tag to google on just the last slide results in all slides linking to google. Somehow, it only sees the very last slide - if you inspect element on the slide, you'll see it always highlights the last slide's code.
EDIT: I've also noticed that it works fine when you don't include the sample-style.css file. But without this, there is no fade/transition effect and the navigation buttons are not formatted, so it would be pointless without this file, but the issue is probably with how the slider works.
Any ideas on what's causing this or how to fix it?
The only thing changed - added links to each slide. (index.html)
...
<div id="slider">
<div class="slide">
<a href="http://www.yahoo.com" ><img src="images/1.jpg" alt=""/></a>
</div>
<div class="slide2">
<a href="http://www.stackoverflow.com" ><img src="images/2.jpg" alt="" /></a>
</div>
<div class="slide3">
<a href="http://www.amazon.com" ><img src="images/3.jpg" alt="" /></a>
</div>
<div class="slide4">
<a href="http://www.google.com" ><img src="images/4.jpg" alt="" /></a>
</div>
</div>
...
I just figured it out. You should edit z-index property in these three places:
.lean-slider-slide.current {
z-index: 1;
}
#slider-direction-nav {
z-index: 2;
}
#slider-control-nav {
z-index: 2;
}
You can find it in slider.css and sample-style.css when you downloaded Lean Slider.
Have a look on this EXAMPLE, it works perfectly even with external resources.
Things that you need to make sure you have:
1.Include jQuery library (jQuery MUST be included BEFORE lean-slider.js)
2.Include the lean-slider.js
3.Include the lean-slider.css
4.Make sure you have an auto_increment class on your images (slider1 , slider2, slider3, etc)
Below all these (not before) add this:
$(document).ready(function() {
$('#slider').leanSlider();
});
And make sure the div that contains your images has an ID id="slider"
Always take the last link; play with the css you can force the position of elements and enable the link for each image:
/*lean slider css overwrite*/
#slider-control-nav, #slider-direction-nav
{
z-index:3;
}
.lean-slider-slide.current
{
z-index:2;
}
.lean-slider-slide.current a
{
float:left;
}

Recreating Phone SMS UI with CSS: Absolute Positioning Conversation to Bottom while Maintaining Scroll

Working in a hackathon and we are having an issue with our phone mockup. We want to anchor the text stream to the bottom: seems like a great opportunity for position: absolute...right? Well that makes it so that our scrolling doesn't work. Right now it is anchored to the top, positioned relative, and scrolling does work.
Try clicking the "I said..." button a few times. Ideally those buttons should be anchored (along with the text boxes that appear) to the bottom.
This is the temporary URL:
http://gotinto.com/text/
AND a PERMANENT JS Fiddle URL:
http://jsfiddle.net/Qyn7V/
Here is the simple HTML:
<div class="convoPhone">
<div class="phoneDisplay">
<div class="convoCont">
<div class="actualConvo">...(the actual text convo goes here)...</div></div></div></div>
Any solutions? We would be open to javascript, CSS, any combination. Thanks in advance!
Have you tried position: fixed? Observing your link, as a proof of concept, something like this should do:
<div class="addLine" style="position: fixed; bottom: 60px; width: 290px;">
Edit:
Put three place holder conversations as place holders with visibility: hidden (this ensures they occupy space).
<div class="convoCont">
<div class="actualConvo" style="">
<div class="invisibleFirst">
<div style="visibility: hidden;" class="textInputCont isaid"><div class="author">Me:</div><textarea class="isaid"></textarea><div class="delete">Remove</div></div>
<div style="visibility: hidden;" class="textInputCont isaid"><div class="author">Me:</div><textarea class="isaid"></textarea><div class="delete">Remove</div></div>
<div style="visibility: hidden;" class="textInputCont isaid"><div class="author">Me:</div><textarea class="isaid"></textarea><div class="delete">Remove</div></div>
</div>
</div>
<div class="addLine" style="position: fixed; bottom: 60px; width: 290px;">
<div class="isaid textLine">I said...</div>
<div class="tsaid textLine">They said...</div>
</div>
<br class="clear">
</div>
Then for each of the first 3 real entries, remove one of the place holders. If you want more precision, you can replicate the same place holder effect with padding-top on actualConvo. Just reduce the padding-top by a fixed value until it bottoms out at 0. If you want to make the buttons scrollable, just removed the styling and apply the padding-top at a higher DOM level.
I ended up positioning the buttons absolute, then using a bit of jquery/javascript to make a minimum height. Thanks for your help everyone!
var contH = $('.phoneDisplay').css('height');
if($('.convoCont').css('height') < contH) {
$('.convoCont').css('height',contH);
}

Facebook like button behaves differently when liked and not liked

I have a Facebook 'Like' button on my page:
<div class="fb-like" data-href="http://mysite.com" data-send="false" data-layout="button_count" data-width="100" data-show-faces="false" data-font="arial"/>
I also have the 'fb-root' div and the SDK javascript (the button functions just as it should).
For some reason, when the like button is toggled on (occurs when the visitor is connected to his Facebook account AND had already liked my page before) the button will magically reduce its width (in some last second javascript) and make the other buttons (twitter/g+) hide it. It aligns just fine for a second and then 'collapses'.
I tried disabling my css and many other components of my site, to no avail.
I attached an image illustrating the situation.
EDIT: Something I just found out. The width attribute is the one that seems to be overridden. When setting width = 2000 (rediculusly high), when the like button is enabled (user is not connected/not liked), the button is indeed 2000px wide, but when a previously-liked user is connected, you can see the 2000px width for a second there, and then it 'collapses' again.
EDIT2: I seem to have found the culprit, but I don't know why and how to fix it. It seems the generated code in the toggled on facebook button sets the width to 72 instead of 100.
Generated code for enabled button:
<div class="fb-like fb_edge_widget_with_comment fb_iframe_widget" data-href="http://mysite.com" data-send="false" data-layout="button_count" data-width="100" data-show-faces="false" data-font="arial">
<span style="height: 20px; width: 100px;">
Generated code for liked(diabled) button:
<div class="fb-like fb_edge_widget_with_comment fb_iframe_widget" data-href="http://mysite.com" data-send="false" data-layout="button_count" data-width="100" data-show-faces="false" data-font="arial">
<span style="height: 21px; width: 72px;">
Any help would be much appreciated.
Thank you!
Well, I ended up adding this to my CSS:
div.fb-like > span {
min-width:100px;
}
Probably not the best way, but it is working for now.
You could try to use
<div style="width: 100px;"></div>
to wrap around your code. usually the plugin will automatically adapt to the width of its parent element on page load.
If the width of parent element is smaller than your data-width, it could cause your Facebook button to shrink. This could be the reason why your button size changes.

Categories