I'm extremely confused and I've been trying to do this for a while. This is just for a simple tumblr theme. I'm trying to make it so viewers can click a link and when it's clicked, the background image of the page switches.
This is the page, eiramanaik.tumblr.com
The background image is shown, and when clicked, I want it to change to this: http://i50.tinypic.com/23lz49h.jpg
I've looked through everything, and even if I understood the coding, I didn't understand how to apply it, as I am very new to html in general.
Please help!
if you want to use jquery is: (first you have to put id into your link as id="link")
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#link').click(function(){
$('#id_background').attr('src','23lz49h.jpg');
});
});
</script>
Related
When i open my website https://tobia-web.wz.cz/me?lang=en , for a second it looks like half the CSS disappeared. Why is this happening? Is it just loading in, or any actual problem with CSS/JS?
add "defer" keywords to <script> tag. example:
<script src="./js/main.js" defer></script>
<iframe height=468 width=1584 src="//docs.google.com/spreadsheets/d/1hUgiZqpgjqqtpnYY6Q1IeoUYlpXlCRUeARpN3cWX87g/gviz/chartiframe?oid=2131305794" seamless frameborder=0 scrolling=no></iframe>
Even after changing width to 100%, it doesn't make it responsive. I am embedding this graph on WordPress website.
Put div around that iframe (as parent element), and set CSS "transform: scale(0.5)" to that div.
<div style="transform: scale(0.5, 0.5);">
<iframe ...>
</div>
It will resize whole frame, including its content.
I have done a bit of looking around on the web for you and have several solutions. One of the most popular seems to be to use JQuery in order to resize the iFrame correctly.
A link to the script is found here: jQuery Responsive iFrame's
<!-- Activate responsiveness in the "child" page -->
<script src="/js/jquery.responsiveiframe.js"></script>
<script>
var ri = responsiveIframe();
ri.allowResponsiveEmbedding();
</script>
<!-- Corresponding code in the "parent" page -->
<script src="/js/jquery.js"></script>
<script src="/js/jquery.responsiveiframe.js"></script>
<script>
;(function($){
$(function(){
$('#myIframeID').responsiveIframe({ xdomain: '*'});
});
})(jQuery);
</script>
From there just make the iFrame have an ID of myIframeID or simply change the text in the script above to accommodate this.
Should this not work for you I would suggest using my Google Search string to finding other possible solutions: responsive iframe width
Good Luck!
I've made a website using WordPress. The problem is the blank slide after the last image. I've checked in Firefox firebug there is not any blank slide or script in code but it is shown in the original site.
Any known solution then help me out.
I just noticed you have this line
<script type="text/javascript" src=".../wp-content/themes/twentyten/js/startstop-slider.js"></script>
and then you have the same code again inside that page
<div id="detail_slider">
<script language="javascript">
...
...
</script>
Try removing that external startstop-slider.js file from the page. Maybe they are interfering with each other.
I'm trying to figure out how to open all of the images within a div in a lightbox. The div is pulling images from a picasa album, so I can't edit each link individually.
What would also work for me is the ability to open all links of a certain filetype in a lightbox.
Thanks!
Try the pretty gallery which meets your requirement.Demo for photo gallery.
I have create a enlarge button on the photo gallery of the pikaChoose by clicking the button i display the gallery in light box. The code for display from pikaChoose is
jQuery(".pika-stage #enlarge a").live('click',function(){
jQuery.fn.prettyPhoto();
jQuery.prettyPhoto.open(api_gallery,api_titles,api_descriptions);
return false;
});
I hope this may be useful to you
You can use lightbox: http://lokeshdhakar.com/projects/lightbox2/
For example (first three lines in head - be sure to have the images like close button in imgs folder):
<script src="jquery-1.11.0.min.js"></script>
<script src="lightbox.min.js"></script>
<link href="css/lightbox.css" rel="stylesheet" />
Image #2
Image #3
Image #4
Since you're using picasa, change the href to the appropriate link to the image. If you're using php, then use for loops with echo, etc...
I have an image that I will use as the button. I need some code that will make the page scroll smoothly down 400px every time the image is clicked.
I think JQuery or Javascript would do the trick, I am not really sure because I do not know them.
It would be even better in fact, if instead of button, I could just have a keyboard shortcut. Just like Google on Google+, "J" and "K" are used to move up and down the posts. This is exactly what I am trying to achieve. Every post in my site will be the same height so that might make it easier to code.
Just bind an animate function to the click event of your image or button and let it animate the scrollTop property with 400.
For example, place this button on your page:
<input type="button" value="Scroll" id="scroll" />
And use this piece of JavaScript:
$('#scroll').click(function() {
$('body').animate({scrollTop: +400}, 1000);
})
Just make sure jQuery is loaded and it will work.
Load jQuery by adding this just before the body end tag:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
And the best way to include the JavaScript snippet is to place the following between the script rule above and the body end tag.
<script type="text/javascript">
$(document).ready(function() {
$('#scroll').click(function() {
$('body').animate({scrollTop: +400}, 1000);
})
});
</script>