I need my images to appear with its original ratio on my tumblr posts, but for some reason they lose a little bit of their bottom when stacked with multiple images. I'm no programmer, my limited knowledge allowed me to find where the code for that might be but I don't know how to program it to fix this issue.
Here's an image demonstrating the problem: http://i.stack.imgur.com/Ta0Tm.jpg
Where I think the code might be:
</script>
<script src="http://static.tumblr.com/wofln30/2XXmyt1i0/jquery.colorbox.js"></script>
<script src="http://static.tumblr.com/wofln30/lFrmyt0d1/jquery.photoset-grid.min.js"></script>
<script>
$('.photoset').photosetGrid({
highresLinks: true,
rel: 'withhearts-gallery',
gutter: '5px',
onComplete: function(){
$('.photoset-grid-lightbox').attr('style');
$('.photoset-grid-lightbox a.photoset-cell').colorbox({
transition: "none",
photo: true,
scalePhotos: true,
maxHeight:'90%',
maxWidth:'90%'
});
}
});
</script>
Thanks in advance and sorry for eventual "noobiness", feel free to call me out on that.
Related
I am using below code. But I am getting start and end, I am finding white space. It should be without any start and end gap. It should be continuously.
I am using this code:
<MARQUEE direction="right" WIDTH=200 HEIGHT=50>
Welcome to the Website. Welcome to the demo.Welcome to the Website. Welcome to the demo.
</MARQUEE>
It is going to right and then start. So gap is there. I want to display continuously. So, with naked eye, we should be not able to find start and end of marquee
Please help me with this
This might help you:
http://www.dynamicdrive.com/dynamicindex2/crawler/index.htm
I have edited as per your need in the following code, save as .html and put the downloaded .js file in the same folder as html file is saved.
you will have to download .js file from the link given.
<html>
<head>
<script type="text/javascript" src="crawler.js">
/* Text and/or Image Crawler Script v1.53 (c)2009-2011 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
*/
</script>
</head>
<body>
<div class="marquee" id="mycrawler">
Welcome to the Website. Welcome to the demo.Welcome to the Website. Welcome tothe demo.
</div>
<script type="text/javascript">
marqueeInit({
uniqueid: 'mycrawler',
style: {
'padding': '5px',
'width': '450px',
//'border': '0px solid #CC3300'
},
inc: 5, //speed - pixel increment for each iteration of this marquee's movement
mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
moveatleast: 2,
neutral: 150,
persist: true,
savedirection: true
});
</script>
</body>
</html>
In this demo http://jsfiddle.net/pHJgP/8/ an image gets replaced with a text
I'd like to do the same on a blogger post http://myblog.blogspot.com/2015/06/firstpost.html
This code goes into post body:
<div id="outer"><img src="http://existdissolve.com/wp-content/uploads/2010/08/microsoft-logo-64x64.png"/></div>
<div id="text" style="display:none">Text here</div>
Where do I put this code?
$(document).ready(function()
{
setTimeout(function()
{
$("div#outer").fadeOut("slow", function ()
{
$("div#outer img").remove();
$("div#outer").html($("div#text").text());
$("div#outer").show();
});
}, 3000);
});
Do I need to add an operator to invoke the function or action in this particular post http://myblog.blogspot.com/2015/06/firstpost.html when it opens? And where/how do I add that operator or trigger code?
What else is missing ?
Before asking I've read several posts on stackoverflow.com , on w3schools.com , etc. experimented but failed due to the lack of knowledge.
place this code just above or before </head>
<script src='http://code.jquery.com/jquery-1.7.2.js'/>
<script type='text/javascript'>
$(document).ready(function()
{
setTimeout(function()
{
$("div#outer").fadeOut("slow", function ()
{
$("div#outer img").remove();
$("div#outer").html($("div#text").text());
$("div#outer").show();
});
}, 3000);
});
</script>
Note: 1.7.2 is taken from the top left corner of the demo http://jsfiddle.net/pHJgP/8/
if 1.7.2 did not work, try other versions.
I am not a PRO. And this is all I know from experimenting.
I could be wrong
May be for you guys is obvious but for me is not.
I would like to create an i help image, that when it is clicked it pop ups a window with information.
I have tried something like this but it does not help:
<a id="dialog-1" href="#"><button id="opener" >i</button></a>
<script>
$(function() {
$( "#dialog-1" ).dialog({
autoOpen: false,
});
$( "#opener" ).click(function() {
$( "#dialog-1" ).dialog( "open" );
});
});
</script>
application.js
//= require jquery
//= require jquery_ujs
//= jquery-ui
//= require turbolinks
//= require_tree .
answer from my comments
Did you include the library jquery-ui?
include the jquery-ui library in your application.js file.
There are many many ways to accomplish what you need.
I will make a suggestion, there are probably other ways but this is something simple.
For the "i" image, I recommend you getting an actual image, better a png with transparent background.
Another option is using an iconic font, such as Font Awesome (example). It looks like an image, but it is treated like a font, so you can change the color, size, etc.
For the pop-up. Single option is creating a hidden div with absolute positioning and opening it with javascript/jQuery and maybe fading the background a little bit. You can google it a little bit and will find many solutions, one will fit your need for sure.
As a second improvement: If the content is very heavy, you may want to load it on demand via AJAX or other async ways, but first get the info window working :)
maybe you miss the $( document ).ready(function() { ... });
try with this:
<a id="dialog-1" href="#"><button id="opener" >i</button></a>
<script>
$(function() {
$( document ).ready(function() {
$( "#dialog-1" ).dialog({
autoOpen: false,
});
$( "#opener" ).click(function() {
$( "#dialog-1" ).dialog( "open" );
});
});
});
</script>
I am trying to figure out why this simple code isn't working. I'm implementing this:
http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm
Here is my code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="fadeslideshow.js">
/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
<script type="text/javascript">
var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [750, 500], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["/images/allimages/vdance750x500.png", "", "", "Caption"],
["/images/allimages/vpoca750x500.png", "", "", ""],
["/images/allimages/vhat750x500.png", "", "", "" ],
["/images/allimages/vdance750x500.png", "", "", ""] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})
</script>
<title>Vanadia's Site</title>
</head>
<body>
<div id="fadeshow1"></div>
<br />
</body>
</html>
I am new to coding and wondering if there is a syntax error... all the images are in the right spot. I dont understand why this isn't working!
Any help would be appreciated.
Where is your doc type and opening html and head tags? Maybe you just didn't include them here, but make sure they aren't missing from your document. Aside from that, check your browser's JavaScript console to see if you're throwing an error. If you are, please post it for all to see.
I copied your code and changed the image paths (demo: jsfiddle.net/hJKMy/).
It is likely that your image paths are incorrect.
In my facebook page tab app I have a couple of different pages that are of different height. As title says, the page pushes the height up when necessary, but the window height doesn't return to shortest possible when I go back to a page that doesn't require much height. This is how it looks:
http://www.facebook.com/EasterIslandTraveling/app_167418876720611
The "Basics" page is the tall page I'm referring to.
After FB.init i use FB.Canvas.setAutoGrow(); which should do the trick, right? What am I doing wrong?
When using FB.init(), first fb js library must be initialized. So you have to include FB.init() function inside window.fbAsyncInit event like as follows:
window.fbAsyncInit = function() {
FB.init({ appId: 'FB APP ID',
status: true,
cookie: true,
xfbml: true,
oauth: true
});
FB.Canvas.setSize({ height: 700 });
}
You can think as you are writing a javascript inside document ready event...
$(document).ready(function(){ /* Js Code */ })
You can decrease the height by using this given below code
<script src="//connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({ appId: 'YOUR APP ID',
status: true,
cookie: true,
xfbml: true,
oauth: true
});
FB.Canvas.setSize({ height: 600 }); // You can set height here..
}
</script>
This is working perfectly for me. Let me know if it doesn't work!!