Use PHP and jQuery, currently displaying a slideshow of images with Colorbox.
I would like to include a DIV below each image (that is updated when each image is displayed with new content). Could be used to display related content, comments function, etc.
Researched around but yet to find any answers - anyone done this before or have any clues?
I think I need to know:
How (if?) an additional DIV can be added to the output of Colorbox
How I can react to the image changing (to update the DIV contents)
Thanks!
You could use the completed callback function to add the info. I made a demo, but I ended up absolutely positioning the caption to overlap the image... if you add it below you'll need to stretch the entire box (demo).
CSS
#cboxLoadedContent {
position: relative;
}
#extra-info {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: #000;
color: #fff;
opacity: 0.8;
filter: alpha(opacity=80);
padding: 10px;
}
Script
$("a[rel]").colorbox();
$(document).bind('cbox_complete', function(){
// grab the text from the link, or whatever source
var extra = $.colorbox.element().text();
$('#cboxLoadedContent').append('<div id="extra-info">' + extra + '</div>');
});
Related
I am trying to place a calendar on the top right corner of my page:
<?php
echo 'other html 1';
echo 'other html 2';
....
// Calendar
echo '<iframe
src="https://calendar_link"
style = "border: 0;
position: absolute;
width: 500; // This does not have any effect, why?
height: 500; // This does not have any effect, why?
top: 160px; // This does not have any effect, why?
frameborder: 0;
scrolling: no;">
</iframe>';
?>
The calendar is displayed and I can alternate its size, but I can't figure out how to move it to an arbitrary position. It always appears below other html code regardless of what I'm doing.
Note that:
I can't change php to html file, as this page is part of a larger system
I don't want to rely on other echo statements. It would be nice to fix this without the need of figuring out what's happening in rest of that file.
I would be happy to move style things specific to iframe out to a separate css file.
How to place iframe wherever I want?
Since you are positioning your iframe, you should use position property and as you want your iframe appearing top right corner of the page then you should also use top and right properties to achieve this result
<?php
echo '<iframe
src="http://cuassistant.tk/"
style = "
border: 0;
position: absolute;
display: block;
width: 500px;
height: 500px;
top: 0px;
right: 0px;
frameborder: 0;
scrolling: no;">
</iframe>';
Checkout the following link CSS position property
Note : since iframe is an old thing in html, there are so many attributes are deprecated. You should better take a look at those at the following page Iframe Tag
I'm currently building a site using WordPress. I'm trying to layout a listview for the products page with CSS but I am experiencing a couple of problems. The code behind these elements are within the WordPress files so I'd rather not touch those if possible.
What I'm trying to do is move "MSDS" next to the title as it was below the title before. I've set it to relative position and moved it using top and right pixel values.
Example 1
Example 2
My first problem is that if you look at Example 1. I have positioned "MSDS" next to that specific title but when you look at Example 2, it has a shorter product name but the positioning of "MSDS" is the same therefore it looks silly. How do I go about fixing this?
My second problem may be fixed if the first is fixed but on a maximised window, the layout looks fine but when resized to a smaller window then the window covers "MSDS" but the title looks fine as it wraps so it's viewable on the page.
I'm not entirely sure where to look or what specific things I should be looking for to find a fix for this. So any help would be much appreciated. The code below is what I used to reposition the "MSDS"
.product-list .product-thumb .description {
position: relative;
bottom: 26px;
left: 290px;
width: 30px;
}
You can always use :after for these things
These should help.
Add these in your stylesheet to
.product-list .product-thumb .description:after {
position: absolute;
content: "MSDS";
color: blue;
}
You can style the element accordingly then
you are looking for position: relative and position: absolute i think.
Try this: https://jsfiddle.net/r5rnyh3y/1/
.title {
display: inline-block;
position: relative;
}
.title a {
position:absolute;
right: -100%;
margin-right: -10px;
display: inline-block;
width: 100%;
}
I am building a wordpress site using jQuery with cycle plugin to cycle through some posts.
I have an image used as a full background, with this css:
img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
#media screen and (max-width: 1024px){
img.bg {
left: 50%;
margin-left: -512px; }
}
I have inserted the first image attachment url into the img.bg with a javascript from the loop. However, this understandably only works once, at page load.
This is the javascript:
$(function () {
$('.bg').attr('src', '<?php get_image_url(); ?>');
});
What I need, I guess is to fire off the script with each iteration of the cycle script, because the source shows that the get_image_url() function supplies the script with the unique url in each article div.
In the end, I even want some navigation buttons to move back and forth, switching the posts and the background simultanuously.
Any suggestions?
You can either use the cycle's next iteration function or using setInterval.
function changeImg()
{
$('.bg').attr('src', '<?php get_image_url(); ?>');
}
setInterval("changeImg()", 1000);
Hope this helps. But still, you would get output only once, when you execute the get_image_url();.
As for now, I use $(".bg").prependTo(document.body); to get the background images out of the article div, and then starting the cycle. This works, although some more problems might mount on the way.
I'm having following problem: my PHP page generates navigation menus from db like <ul> menus then with the help of JS shows it like multi-level menu. The problem is, it shows whole loading process. At first user sees something like that:
Then
How to hide whole loading process of page, or is there any other solution for this issue?
hide it in css,
#loading {
display: block;
background: url(loading.gif) no-repeat center center;
}
#container {
display: none;
}
and, in javascript show it again (this code uses jquery)
$(function(){
$('#loading').fadeOut(250, function(){
$('#container').show();
});
});
of course you can do this like anyhow you want, hide and show anything in css,
then on document ready, switch it over to the content. by hiding the loading div, and showing the content.
Set the style on display:none; until your page is completely loaded.
Generally this is done by showing/hiding a div or two over the top of your content. You can get a fancy loading gif from http://www.ajaxload.info/ to get you started. Then you'll want to place a DIV on your page:
<div id="loading">
<p><img src="loading.gif" /> Please Wait</p>
</div>
You'll want this hidden by default, so you'd need to add this CSS:
#loading { display:none; }
You'd also want to setup the display for this too:
#loading { display:none; position:fixed; left:0; top:0; width:100%; height:100%;
background-image:url("transparentbg.png"); }
#loading img {position: absolute; left:50%; top:50%}
The file transparentbg.png would be a 25x25 black PNG set to about 80% opaque. Next you would need a way to show and hide this with jQuery:
function showLoading() {
$("#loading").show();
}
function hideLoading() {
$("#loading").hide();
}
I generate a div for my javascript automated validation script. It is generated with below code:
var alertbox = document.createElement("div");
Now how do i center that div programatically both horizontally and vertically?
Note: Currently I am showing an alert box but once i know how to center a div, i will
replace the alertbox with this dynamically generated div which will also provide some
lightbox-like effect.
Thanks
Note: For reference, you can download latest version of this script here.
Please note that i dont want to use external css for this because this is validation script and it should be able to do it programatically. For example:
using something like this can be helpful:
alertbox.style.position: whatever
....
It's a matter of applying the same CSS rules as you would have with static content. Horizontal centering can be achieved as described in this article - basically you give the div a fixed with and set left and right margins to auto. Vertical centering is a bit trickier - a few approaches are discussed here and detailed in this this blog post.
The tidiest way is probably to define a CSS class that takes care of the centering and then apply that class to the dynamically generated element like this:
alertbox.className = "myCssClass";
Update:
Since you are already using JavaScript for creating the div, you could of course use it for the centering as well (in combination with CSS absolute positioning) - that would actually probably be a cleaner solution (due to the hackishness of the CSS vertical centering). Exactly how you do this depends a bit on what tools you are using - it's probably much easier to achieve with a JS framework such as Prototype or jQuery than with "raw" JavaScript since browsers handle window/browser heights a bit differently.
If you are using jQuery, why not use the validation plugin?
You should be able to combine it with a modal window (like SimpleModal).
But if you don't want to change what you have already done, try something like this:
I would just apply some CSS rules to the div to position it (I've included an overlay which covers up the page and puts the alertbox on top):
Note: The reason the div is positioned to the far left is because you need to get the dimensions of the div with the contents inside. A hidden div will have a height and width of zero. Once the size is determined, it calculates the center of the page and positions the div.
CSS
#overlay {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background: #000;
opacity: 0.8;
filter: alpha(opacity=80);
z-index: 100;
}
#alertbox {
background: #444;
padding: 10px;
position: absolute;
left: -99999px;
top: 0;
z-index: 101;
}
Script
function alertBox(alertMsg){
// Add overlay
$('<div id="overlay"></div>')
.hide()
.appendTo('body')
.fadeIn('slow');
// Add alert
$('<div id="alertbox"></div>')
.html(alertMsg)
.appendTo('body');
// calculate & position alertbox in center of viewport
var abx = $('#alertbox');
var abxTop = ($(window).height() - abx.height())/2;
var abxLft = ($(window).width() - abx.width())/2;
abx
.hide()
.css({ top: abxTop, left: abxLft })
.fadeIn('slow');
// add click to hide alertbox & overlay
$('#overlay, #alertbox').click(function(){
$('#overlay, #alertbox').fadeOut('slow',function(){
$('#alertbox').remove();
$('#overlay').remove();
});
})
}
For whatever reason, I have not been able to center a DIV using margin-right and margin-left. What I have found works better is to encapsulate them within a table (it's a bit globby code, but it works for me). And you can use the DOM style object to modify the margin as follows:
<table style="margin-left:auto;margin-right:auto;"><tr><td><div id="yourdiv"></div></td></tr></table>