In the WordPress theme I am using there is an area for HTML banner code. At the moment it contains the following:
<a href="http://bathcitysound.com/streaming/player.html">
<img src="my-image-code-goes-here" /></a>
All is well and good, and it functions as it should and when clicked it goes to the specific page. However, what I actually want to happen is when the image is clicked, it opens a pop up window of 300 pixels wide and 600 pixels height with this as the address:
http://bathcitysound.com/streaming/player.html
What should I add to the existing code to make that work?
This should work:
<a href="javascript:window.open('http://bathcitysound.com/streaming/player.html','yourWindowTitle','width=300,height=600')">
<img src="my-image-code-goes-here" />
</a>
You can try in your browser, by going to this URL:
javascript:window.open('http://bathcitysound.com/streaming/player.html','yourWindowTitle','width=300,height=600')
Related
I'm new to programming unfortunately and so to help me I have been following some simple tutorials on youtube (in addition to following Treehouse lessons). The one I have been struggling with and can't seem to find a solution to is building a simple lightbox, well getting the click event to bring up the lightbox. I have checked all lines, syntax, whether I've omitted a ; or {}, thought maybe I had the javascript src incorrect, tried downloading, creating a js folder and linking to that, referencing google hosted javascript, checked firebug, tried different browsers, checked that the CSS is correct (which it seems to be as when setting the display to block it appears OK), thought maybe there is updated syntax rules (tried jQuery instead of $ but just can't see where I'm making an error. Probably I have omitted something really simple, so please forgive me in advance. The youtube link I'm following is: https://www.youtube.com/watch?v=k-uonF7Gdgw Have also checked the comments to the video to see if anyone else is having same problem, some are, but mostly everyone else seems ok, and no solutions posted for those not getting it to work!
Please see below code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.lightbox').click(function(){
jQuery('.backdrop, .box').animate({'opacity':'.50'}, 300, 'linear'); //fades in the backdrop and the lightbox - speed of 300, and displayed in a linear fashion. Only want the backdrop displayed with 50% opacity, and the box at 100% (see below line)
jQuery('.box').animate({'opacity':'1.00'}, 300, 'linear');
jQuery('.backdrop, .box').css('dispaly', 'block'); //sets the appearance of the box
});
});
</script>
Many thanks in advance, and thanks for great resource!
Nic
Lightbox is a JavaScript technique used to display images and other web content using modal dialogs where the image is shown up center filling most of the screen, and the rest of the window is dimmed out. Lightbox was originally the name of a specific JavaScript plugin. However, common usage of the term has evolved to encompass Lightbox-style JavaScript plugins and effects in general.
First we take some images (when we click on the images the LightBox will be shown). We will place this image in a
HTML code:
<section id="examples" class="examples-section">
<div class="container">
<h3 style="clear: both;">Four image set</h3>
<div class="image-row">
<div class="image-set">
<a class="example-image-link" href="img/demopage/image-3.jpg" data-lightbox="example-set" data-title="Click the right half of the image to move forward."><img class="example-image" src="img/demopage/thumb-3.jpg" alt=""/></a>
<a class="example-image-link" href="img/demopage/image-4.jpg" data-lightbox="example-set" data-title="Or press the right arrow on your keyboard."><img class="example-image" src="img/demopage/thumb-4.jpg" alt="" /></a>
<a class="example-image-link" href="img/demopage/image-5.jpg" data-lightbox="example-set" data-title="The next image in the set is preloaded as you're viewing."><img class="example-image" src="img/demopage/thumb-5.jpg" alt="" /></a>
<a class="example-image-link" href="img/demopage/image-6.jpg" data-lightbox="example-set" data-title="Click anywhere outside the image or the X to the right to close."><img class="example-image" src="img/demopage/thumb-6.jpg" alt="" /></a>
</div>
</div>
</div>
</section>
Now add css code files for screen and lightbox. Also download lightbox.js and jquery library java-script files.
Here is my reference page: http://ca.pockethm.com/setupaccount/feature-videos_library.php
I am using Dynamic Drive's "Dynamic Ajax" script to change the content in a 'containerarea' div. Here is a sample of my actual anchor code:
<a href="javascript:ajaxpage('videos-maintenance/appliances-repair_fridge_gasket.php', 'contentarea');">
<img src="http://aaaa.pockethm.com/images/icon-youtubeTV.png" alt="Repair a Refrigerator Door Gasket" class="icon-image" border="0" />
<div class="icon-text">Repair a Refrigerator Door Gasket</div>
</a>
What I need is to have the page jump to an <a name="videoTop"> anchor positioned above the video window upon clicking the YouTube icon to watch a particular video in preparation for when I add a lot more videos. I've tried onclick, onfocus, onmouseover, and a variety of other code mashes....to no avail. There's a strong possibility I'm doing it wrong, though.
Thanks in advance for the assist.
You need to stack it in the inline code:
<a href="javascript:document.location.hash='#videoTop';ajaxpage('videos-maintenance/appliances-repair_fridge_gasket.php', 'contentarea');">
I am trying to locate javascript code that, when I rollover an image, will make a box appear below the image and expand down (much like how a movie screen in a theater would roll from the ceiling to the floor). In that box, content would also appear, that I have previously added, that describes the image above. Already existing underneath the image I have a div with content in it...I would also like this div to be pushed down as the box described above expands down.
Any suggestions?
Thank you very much in advance!
C*
Forgot the code that I am using...so what is happening here is that I have a picture, and below it, a small box, that when I rollover that small box it changes color. So, I want to add, when I scroll over that small box, not only does it still change color, but the new vertical expanding box appears below it. I have javascript in a *.js file that handles the already existing rollover effect but it's quite long and I wasn't sure if I should add that (it was create by Dreamweaver when I created a rollover image).
<div class="images">
<figure class="images">
<img src="../images/Flower2.jpg" width="300" height="199" alt="Life">
</figure>
<figcaption class="content"><a class="typeB" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','../graphics/life2.jpg',4)"><img src="../graphics/life1.jpg" width="300" height="25" id="Image3" /></a>
</figcaption>
</div>
You don't give much information in your question about your current setup, but assuming that you have your HTML set out something like this:
<div>
<img id="tux" src="http://upload.wikimedia.org/wikipedia/commons/1/1c/Crystal_128_penguin.png" />
<div id="tux_desc" class="imgDesc" style="display: none">
<p>A cute penguin!</p>
</div>
</div>
<div>
<p>This text is part of the normal document flow</p>
</div>
Then you can use the following JavaScript (which makes use of jQuery):
$('#tux').hover(
function() {
$('#tux_desc').slideDown();
},
function() {
$('#tux_desc').slideUp();
});
You can see it working here: http://jsfiddle.net/wbAxm/1
something like this ought to to do it as long as the div to expand is directly after the image in the mark-up:
$(".class_for_images").on("mouseenter mouseleave", function() {
var content = $(this).next();
if (content.is(":visible")) {
content.slideUp();
} else {
content.slideDown();
}
});
If you want more than this, or it doesn't work, you'll need to post some code so that we can provide more detailed answers...
On my page http://bit.ly/KseVxs I have a floating element that stays at one place when I scroll the page down.
How can I adjust css so it would show on the top of page? Right now it shows with extra space at the top ( see attached screenshot). In other words I need it to behave like a similar element on this page http://bit.ly/LsWPaC , it utilizes the same exact script and css.
A couple of suggestions:
Have you tried changing the offset value in the plugin configuration? e.g.
$( '#floater3' ).scrollFollow({
speed: 500,
offset: 0
});
When I checked just now the offset is set to 165px.
I also notice that a br is the first element in your scrolling object. That is going to add some additional padding above the blue 'call' box, which may not be desirable.
In your html look for:
<div id="floater2" ...
Cut the whole div tag from its starting div to its closing div tag.
Then look for this html block:
<a href="mold-coupons-free" rel="nofollow">
<img src="images/coupon-free-inspection-town.gif" width="236" height="109" border="0" alt="FREE Mold Inspection coupon">
</a>
Paste the code that you removed immediately after the </a> tag, so it would look like this:
<a href="mold-coupons-free" rel="nofollow">
<img src="images/coupon-free-inspection-town.gif" width="236" height="109" border="0" alt="FREE Mold Inspection coupon">
</a>
<div id="floater2" ... </div>
I'm following this simple demo tutorial here:
http://jquerytools.org/demos/scrollable/index.html
Well basically, I'm following the tutorial above. The problem with that demo is that it loads all the images at one time affecting performance greatly. I want it so that it only loads a set of images every time you click the arrows. So basically, once you go to the page, it loads the first set of images first. Then, once you click one of the arrows, it loads the next set of images. This is so that the page has a much shorter load time. Is there anyway to do that with ajax or maybe jQuery load? I want it to be something like the link below but using the jquery tools scrollable plugin:
http://sorgalla.com/projects/jcarousel/examples/dynamic_ajax_php.html
It'd be helpful if you provided some of your code. However, from the documentation shown, your image sets should be in separate divs to achieve what you want
//one set
<div>
<img src="http://farm1.static.flickr.com/163/399223609_db47d35b7c_t.jpg" />
<img src="http://farm1.static.flickr.com/135/321464104_c010dbf34c_t.jpg" />
<img src="http://farm1.static.flickr.com/40/117346184_9760f3aabc_t.jpg" />
<img src="http://farm1.static.flickr.com/153/399232237_6928a527c1_t.jpg" />
</div>
///Next set, revealed on click
<div>
<img src="http://farm1.static.flickr.com/163/399223609_db47d35b7c_t.jpg" />
<img src="http://farm1.static.flickr.com/135/321464104_c010dbf34c_t.jpg" />
<img src="http://farm1.static.flickr.com/40/117346184_9760f3aabc_t.jpg" />
<img src="http://farm1.static.flickr.com/153/399232237_6928a527c1_t.jpg" />
</div>