my fiddle
$szPostContent = $post->post_content;
$szSearchPattern = '#(<img.*?>)#';
$a='';
$aPics='';
preg_match_all( $szSearchPattern, $szPostContent, $aPics );
$iNumberOfPics = count($aPics);
echo "<br />Number of pics on each post...............".$iNumberOfPics;
array_push($postimg, $iNumberOfPics);
$iNumberofPics shows image from single post...
look at the demo ..u will find that on mouseover of arrow imgthe slider dissapears.while i want to show that main div continously until the users remains there on that page..
<div class='container' style='height:150px; width:225px;'>
<div class="imageslider" id="imageslider" style="border: 1px solid #000000; height:150px; width:225px;display:none">
<img class="arrow left" style="border: 1px solid #000000; height:25px; width:25px; float:left; margin-top:50px;" />
<div class="images"></div>
<img class="arrow right" style="border: 1px solid #000000; height:25px; width:25px; float:right; margin-top:50px;" />
</div>
And Script
$(".container").hover(function () {
$(this).find('.imageslider').show();
}, function () {
$(this).find('.imageslider').hide();
});
FIDDLE
.container is there as a placeholder in order for you to be able to mouse it over and out
I am not sure if I got your question right, so I hope one of these approaches help you:
In your code you use onmouseout, not onmouseover. You can:
Use $(...).show() and $(...).hide() on mouseover and mouseout.
Take a look at $(...).toggle() that will take away some work.
Related
I'm working with osCommerce for the first time. I inherited this code, and we'd like to tighten up the new_products page. This is the code for the display:
div class="contentText">
<div class="NewProductsList">
<table border="0" width="100%" cellspacing="0" cellpadding="2">
<tr>
<td style="border-bottom:solid 1px #ccc;">
<div class="outer">
<div id="x">
<img src="images/swords-sandals.jpg" alt="Swords, Sandals and Sirens" title="Swords, Sandals and Sirens" width="120" height="180" />
<span class="name-font">
Swords, Sandals and Sirens
</span>
<span class="price-font">$19.00</span>
<br /><br />
Murder, conmen, elephants. Who knew ancient times could be such fun?
<br /><br />
Many of the stories feature Claudia Seferius, the
...read more
</div>
</div>
Then this is my stylesheet (css) code:
<style>
.price-font {
float: right;
color: #000000;
font-size: 18px;
}
.name-font {
font-size: 14px;
font-weight: bolder;
}
.outer {
padding: 10px;
}
#x {
display: inline-block;
}
#y {
width: 82%;
vertical-align: top;
display: inline-block;
}
.NewProductsList tr.alt td #x {
float: right;
}
.NewProductsList tr.alt td {
background-color: #ecf6fc;
}
Any help I could get for tightening up the text so that it's directly next to the image, rather than under it, would be greatly appreciated.
Thanks!
Try adding this to your CSS:
#x > a {
float: left;
}
JSFiddle: https://jsfiddle.net/suomyone/h2j013dx/
Basically, this targets the product link (and image, in this case) and floats it to the left. As a result, the product title and description moves up, right next to the image. You'll have to play around with the margins or paddings to achieve the desired spacing between the image and text.
Was this the effect you were looking to get?
Ps. Your HTML is missing some closing tags, specifically </td>, </tr>, </table>, and two </div> tags. I added these to the JSFiddle demo.
i am trying to call a function when clicking an image button below but the function never fires. could any one tell me what i am doing wrong? is there any good jsfiddle type site that i show demo ?
<script>
function deleteLike(a,b)
{
alert("PageLink:"+a+"\nId:"+b);
}
</script>
<?php
$i="23";
$pageLink="http://www.nba.com";
echo '<div id="'.$i.'" style="float: right; padding: 5px 2px 2px;"> <img class="liker" onclick="deleteLike("'.$PageLink.'","'.$i.'")" src="http://cultureslurp.com/wp-content/uploads/2011/09/Facebook-Like-Button.jpg" border="0"></div>';
?>
try doing:
echo '<div id="'.$i.'" style="float: right; padding: 5px 2px 2px;"> <img class="liker" onclick="deleteLike(\''.$PageLink.'\',\''.$i.'\')" src="./liked.png" border="0"></div>';
You can't have
onclick="deleteLike("");"
Instead use:
onclick="deleteLike('');"
Like this:
echo "<div id='$i' style='float: right; padding: 5px 2px 2px;'> <img class='liker' onclick=\"deleteLike('$PageLink','$i');\" src='http://cultureslurp.com/wp-content/uploads/2011/09/Facebook-Like-Button.jpg' border='0'></div>";
Make your life easy and use jQuery and implement best practices.
Look at this code. Works also for people without javascript enabled!
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(function(){
$('.a-liker').click(function(e){
e.preventDefault();
alert("PageLink: " + $(this).attr('href'));
alert("Id: " + $(this).parent().attr('id'));
});
});
</script>
<div id="23" style="float: right; padding: 5px 2px 2px;">
<a href="http://www.nba.com" class="a-liker">
<img class="liker" src="./liked.png" border="0">
</a>
</div>
All uploaded images on my website have a frame around the thumbnail. I have it set up so that there is room to display the user's name, and avatar picture in the frame, with their uploaded image. Hopefully these two images give a better understanding of what I'm trying to accomplish
link to imgur
I use this for the user names and profile pictures:
<?php if( $ib->user['id'] ) {?>
div class="userInfo">
<img class="avatar" width="40" height="40" src="<?php echo Config::$absolutePath.$ib->user['avatar']; ?>"/>
<div class="name">
<strong>
<?php echo $ib->user['name']; ?>
</strong>
</div>
And this for the frame around the uploads
#imageGrid div {
position: absolute;
overflow: hidden;
border-radius: 0px;
border: 1px solid #FFFFFF;
padding: 60px 10px 10px 10px;
moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #a1a1a1;
background-color: #dddddd;
I had no clue on what I should try next, so I wanted to see if I could just sort of add/combine the divs, but that won't work.
If you need more info, a better description, or more code, let me know. Thanks in advance, I'm pretty new at this, and this is the one thing I am stuck on.
you need to put them in a container element which controls the layout of what is in it, you could use userInfo
<div class="userInfo">
<img class="avatar" width="40" height="40" src="<?php echo Config::$absolutePath.$ib- >user['avatar']; ?>"/>
<div class="name">
<strong>
<?php echo $ib->user['name']; ?>
</strong>
</div>
</div>
.userInfo {
width:50px;
}
.avatar {
width:40px;
}
.name {
width:40px;
}
as for #imageGrid div I would remove most of what you have in there and apply it to the specific CSS classes I have added above.
I have this code as an example:
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
function showonlyone(thechosenone) {
$('.newboxes').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).show(200);
}
else {
$(this).hide(600);
}
});
}
</script>
</head>
<body>
<div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
<a id="myHeader1" href="javascript:showonlyone('newboxes1');" >show this one only</a>
</div>
<div class="newboxes" id="newboxes1" style="border: 1px solid black; background-color: #CCCCCC; display: block;padding: 5px; width: 150px;">Div #1</div>
<div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
<a id="myHeader2" href="javascript:showonlyone('newboxes2');" >show this one only</a>
</div>
<div class="newboxes" id="newboxes2" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px; width: 150px;">Div #2</div>
<div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
<a id="myHeader3" href="javascript:showonlyone('newboxes3');" >show this one only</a>
</div>
<div class="newboxes" id="newboxes3" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px; width: 150px;">Div #3</div>
</body>
</html>
On a different page, I want to have a link that will show Div #2 when the user loads the page by clicking that external link. I would presume that such thing would be possible by some type of adjustment to the URL? For instance: domain.com/page.php?=showdiv2
Any assistance is appreciate, my knowledge of coding is limited (especially with PHP) so please be detailed if you choose to help.
I would code it with PHP, something like this:
page.php?id=idofdiv
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
function showonlyone(thechosenone) {
$('.newboxes').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).show(200);
}
else {
$(this).hide(600);
}
});
}
$(document).ready(function(){
$("#<?php echo $_GET['id']; ?>").show();
});
</script>
</head>
<body>
<div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
<a id="myHeader1" href="javascript:showonlyone('newboxes1');" >show this one only</a>
</div>
<div class="newboxes" id="newboxes1" style="border: 1px solid black; background-color: #CCCCCC; display: block;padding: 5px; width: 150px;">Div #1</div>
<div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
<a id="myHeader2" href="javascript:showonlyone('newboxes2');" >show this one only</a>
</div>
<div class="newboxes" id="newboxes2" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px; width: 150px;">Div #2</div>
<div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
<a id="myHeader3" href="javascript:showonlyone('newboxes3');" >show this one only</a>
</div>
<div class="newboxes" id="newboxes3" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px; width: 150px;">Div #3</div>
What I have done is :
$(document).ready(function(){
$("#<?php echo $_GET['id']; ?>").show();
});
When PHP is parsed (which is server side) it will send the id given in the url ($_GET['id']) to parse within your jQuery code. This code will excecute when the document is ready.
if $_GET['id'] is empty, or nonexistence, then nothing will happen (there is no div to show).
As always there are many solutions, however we have a similar requirement in an application where we want one page to send a message to another to be displayed to the user. For example, after updating a setting return to the main page with the message "Setting Updated" at the top. Our solution was to send the message in the url, and then have a javascript that runs on every page load looking for a message in the url. If it's there it's shown to the user, if it's not there, nothing happens.
In our common pageLoad routine (javascript on every page) we do
if (jQuery.query.get('fadeMessage'))
{
FadeMessage(jQuery.query.get('fadeMessage'));
}
And then FadeMessage is defined as:
function FadeMessage(message) {
jQuery('#fadeMessage').html(message).animate({ "top": "0" }, 1000).delay(2000).animate({ "top": "-80px" }, 1000);
}
The "fadeMessage" div is on every page as:
<div id="fadeMessage">
</div>
Although as I'm typing this I'm thinking we could just inject that div when it's needed. Hmmm... :-)
There are a number of ways to accomplish what you want to do here. I will explain how you can do it with $_GET.
You can control this with a $_GET variable (at the end of the URL, just add ?varName=value where varName is the name of a variable (this is arbitrary), and value is the value you want to assign it.
Then in your PHP code you can access this variable by a) checking if it exists and b) performing logic based on its value:
<?php
$divToShow = isset($_GET['div']) ? $_GET['div'] : "";
//logic here
?>
So for example, if you want <div id="div_2"> to be displayed, you could plug this in to jQuery by writing:
<script language="javascript" type="text/javascript">
$("div#div_<?= $divToShow ?>").show();
$("div:not(#div_<?= $divToShow ?>)").hide();
</script>
OR you could simply force PHP to only print out div # 2:
<?php
// set $divId to a value
if ($divId == $divToShow) : ?>
<div id="<?= $divId ?>">
<!-- content here -->
</div>
<?php endif; ?>
There are two steps to do: At first we need to know how to use parameters in our domain and finally the contents need to be switched.
1) You can add parameters to the called files as following:
http://server/path/file?key=value
For this examples let's use the key page. So these would be the urls you'd need to link:
http://server/path/file?page=div-1
http://server/path/file?page=div-2
2) Split your code into one php file containing all that's in there right now and two ones, called whatever you like, e.g. div-1.php and div-2.php . Into the latter ones you copy the specific div-1 and div-2 contents.
3) Finally open your main php file and remove div-1 and div-2. They should both be in the other files now. And enter the following php code:
<?php
if (isset($_REQUEST['page']) === false || in_array($_REQUEST['page'], array('div-1', 'div-2')) === false) {
$_REQUEST['page'] = 'div-1';
}
include $_REQUEST['page'] . '.php';
?>
That urls will call the php file, that's pushing its content to the browser and while pushing it's executing the script we put in. The script verifies if the url parameter page is set, checks if it is valid and pushes the second file just where we put the script before.
The latter check is highly required for security reasons (see below)!
Note: The following code line is used to display the default page, e.g. index or start. It can be changed easily.
$_REQUEST['page'] = 'div-1';
Note: We need to care about security and therefore do not allow pages, that do not exist. In case we don't do so, various php scripts on your server could be executed.
Just change, edit or add additional elements to the array inside the if statement above:
array('div-1', 'div-2')
You could do this using Javascript/jQuery only by checking for the hash part of the URL on page load:
http://mydomain.com/some/path#showcontainer1
HTML
<div class="container_one" style="display:none;">Content</div>
<div class="container_two" style="display:none;">Other Content</div>
JS
$(function(){
switch( window.location.hash ){
case '#showcontainer1': //if hash is #showcontainer1
$('.container_one').fadeIn(); //fadein the container with some class
break;
default:
$('.container_two').fadeIn() //else fade container with other class
break;
}
});
I have inserted jquery slide show in to my newly created real estate web site.
My real estate web site runs on 'Openrealty' platform which is php.
Here is a part of my Original jquery code.
if(!repeat)
$this.parent()
.find('li:nth-child('+current+') a')
.stop(true,true)
.animate({'marginRight':'-20px'},300,function(){
$(this).animate({'opacity':'0.7'},700);
});
When I look at where the error comes from through 'Firebug', it shows as follows.
if(!repeat)
$this.parent()
.find('li:nth-child('+current+') a')
.stop(true,true)
.animate(,300,function(){
$(this).animate(,700);
});
Here you can clearly see that some parts of the original code does not renders by the browser. Such as {'marginRight':'-20px'}
As shown by firebug the error begins from " .animate(,300,function(){ " onwards.
I need to find a solution why this Jquery not works in my web site.
Source of this Jquery slide show : http://tympanus.net/codrops/2010/04/28/pretty-simple-content-slider-with-jquery-and-css3/
Any feedback is highly welcomed...
Thanks for the first 2 answers and request.
Yes I removed all (') marks within all styling as per the answers.
But still the error occurs as same above...
Total Jquery script have three parts.
1. Link to http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
2. Link to outside JS file called 'jquery.easing.1.3.js'
3. Inline script
Following is the inline jquery:
<script type="text/javascript">
$(function() {
var current = 1;
var iterate = function(){
var i = parseInt(current+1);
var lis = $('#rotmenu').children('li').size();
if(i>lis) i = 1;
display($('#rotmenu li:nth-child('+i+')'));
}
display($('#rotmenu li:first'));
var slidetime = setInterval(iterate,3000);
$('#rotmenu li').bind('click',function(e){
clearTimeout(slidetime);
display($(this));
e.preventDefault();
});
function display(elem){
var $this = elem;
var repeat = false;
if(current == parseInt($this.index() + 1))
repeat = true;
/* slide in the current one */
if(!repeat)
$this.parent()
.find('li:nth-child('+current+') a')
.stop(true,true)
.animate({marginRight:-20px},300,function(){
$(this).animate({opacity:0.7},700);
});
current = parseInt($this.index() + 1);
var elem = $('a',$this);
elem.stop(true,true).animate({marginRight:0px,opacity:1.0},300);
var info_elem = elem.next();
$('#rot1 .heading').animate({left:-420px}, 500,'easeOutCirc',function(){
$('h1',$(this)).html(info_elem.find('.info_heading').html());
$(this).animate({left:0px},400,'easeInOutQuad');
});
$('#rot1 .description').animate({bottom:-270px},500,'easeOutCirc',function(){
$('p',$(this)).html(info_elem.find('.info_description').html());
$(this).animate({bottom:0px},400,'easeInOutQuad');
})
$('#rot1').prepend(
$('<img/>',{
style : 'opacity:0',
className : 'bg'
}).load(
function(){
$(this).animate({opacity:1},600);
$('#rot1 img:first').next().animate({opacity:0},700,function(){
$(this).remove();
});
}
).attr('src','slide-images/'+info_elem.find('.info_image').html()).attr('width','950').attr('height','300')
);
}
});
</script>
And following is the html part which shows the slide show.
<div id="sliderbox">
<div class="rotator">
<ul id="rotmenu">
<li>
Luxury Life
<div style="display:none;">
<div class="info_image">1.jpg</div>
<div class="info_heading">Best Homes for you</div>
<div class="info_description">
This is description...
Read more
</div>
</div>
</li>
<li>
Smiling Faces
<div style="display:none;">
<div class="info_image">2.jpg</div>
<div class="info_heading">Do at our best</div>
<div class="info_description">
This is description...
Read more
</div>
</div>
</li>
<li>
Tradition
<div style="display:none;">
<div class="info_image">3.jpg</div>
<div class="info_heading">We goes with tradition</div>
<div class="info_description">
This is description...
Read more
</div>
</div>
</li>
<li>
Lands for sale
<div style="display:none;">
<div class="info_image">4.jpg</div>
<div class="info_heading">A best place to live in Kandy</div>
<div class="info_description">
This is description...
Read more
</div>
</div>
</li>
<li>
True Nature
<div style="display:none;">
<div class="info_image">5.jpg</div>
<div class="info_heading">Brings you beauty in nature</div>
<div class="info_description">
This is description...
Read more
</div>
</div>
</li>
</ul>
<div id="rot1">
<img src="" width="950" height="300" class="bg" alt=""/>
<div class="heading">
<h1></h1>
</div>
<div class="description">
<p></p>
</div>
</div>
</div>
</div>
and following is the CSS:
.rotator{
background-color:#222;
width:950px;
height:300px;
margin:0px auto;
position:relative;
/*font-family:'Myriad Pro',Arial,Helvetica,sans-serif;*/
font-family:Helvetica,sans-serif;
color:#fff;
text-transform:uppercase;
/* letter-spacing:-1px; */
letter-spacing:1px;
border:3px solid #f0f0f0;
overflow:hidden;
-moz-box-shadow:0px 0px 10px #222;
-webkit-box-shadow:0px 0px 10px #222;
box-shadow:0px 0px 10px #222;
}
img.bg{
position:absolute;
top:0px;
left:0px;
}
.rotator ul{
list-style:none;
position:absolute;
right:0px;
top:0px;
margin-top:6px;
z-index:999999;
}
.rotator ul li{
display:block;
float:left;
clear:both;
width:260px;
}
.rotator ul li a{
width:230px;
float:right;
clear:both;
padding-left:10px;
text-decoration:none;
display:block;
height:30px;
line-height:30px;
background-color:#222;
margin:1px -20px 1px 0px;
/*opacity:0.7;*/
color:#f0f0f0;
font-size:12px;
border:1px solid #000;
border-right:none;
outline:none;
/*
text-shadow:-1px 1px 1px #000;
*/
-moz-border-radius:10px 0px 0px 5px;
-webkit-border-top-left-radius:10px;
-webkit-border-bottom-left-radius:10px;
border-top-left-radius:10px;
border-bottom-left-radius:10px;
}
/* .rotator ul li a:hover{
text-shadow:0px 0px 2px #fff;
}
*/
.rotator .heading{
position:absolute;
top:0px;
left:0px;
width:500px;
}
.rotator .heading h1{
text-shadow:-1px 1px 1px #555;
font-weight:normal;
font-size:36px;
padding:20px;
}
.rotator .description{
width:300px;
height:15px;
position:absolute;
bottom:0px;
left:0px;
padding:5px;
background-color:#222;
-moz-border-radius:0px 10px 0px 0px;
-webkit-border-top-right-radius:10px;
border-top-right-radius:10px;
/*opacity:0.7;*/
border-top:1px solid #000;
border-right:1px solid #000;
}
.rotator .description p{
/*text-shadow:-1px 1px 1px #000;*/
text-transform:none;
letter-spacing:normal;
line-height:10px;
font-family:Helvetica,sans-serif;
font-size:13px;
}
a.more{
color:orange;
text-decoration:none;
text-transform:uppercase;
font-size:10px;
}
a.more:hover{
color:#fff;
}
I have analysed every of these scripts but couldn't identified any issues...
Please tell me how I can solve this.
Try this in you original code.
if(!repeat)
$this.parent()
.find('li:nth-child('+current+') a')
.stop(true,true)
.animate({marginRight:-20},300,function(){
$(this).animate({opacity:0.7},700);
});
Your CSS properties for the animate() function seem wrong.
Experiment without the ' (single quote characters)
if(!repeat)
$this.parent()
.find('li:nth-child('+current+') a')
.stop(true,true)
.animate({marginRight:'-20px'},300,function(){
$(this).animate({opacity:0.7},700);
});
As in the animate() examples from the jquery webpage