Hi guys,
I’m working on a website here : spacescientific.com
when mouse pointer go on links in website, an yellow (ajax/java>I’m not sure!) box opening and show intro of article. now I want to limit number of words (for example to 20 words) on this window .
to explain what I mean: www.spacescientific.com/spacescientific.jpg
how can I do that. any idea???
Can anyone help me about this pleaseee. this is really really important to me
thank you
You basically just have something like this.
<div><p>text<div class=“inner”>DROPDOWN</div></p></div>
You hide the .inner dropdown via something like this…
p{position:relative;}
.inner
{
height:200px;
width:200px;
position:absolute;
top:100%;
left:100%;
margin-left:-999em;
background:yellow;
}
p:hover .inner { margin:0;}
It’s something to that effect.
Hi Ryan, thank you so much for reply
I’m really beginner to coding and these stuff. can you please explain me which/where file should I locate and edit?
(p.s: I can send you website basic files and template if it helps)
Copy paste this example into a file, and view it on the web.
<!doctype html><html>
<head>
<title>asdf</title>
<style type="text/css">
div{position:relative;
width:100px;
height:100px;
background:red;}
.inner
{
height:200px;
width:200px;
position:absolute;
top:90%;
left:90%;
margin-left:-999em;
background:yellow;
}
div:hover .inner { margin:0;}
</style>
</head>
<body>
<div><p class="inner">DROPDOWN</p></div>
</body>
</html>
It’s a simple version of it :). If you don’t know how to take that example and conver it to what you need, it sounds like you should consult a friend or a web designer to help you along the way :).
As for limiting the article to 20 words or so, you’ll need to either use JS or PHP (or some other language) to cut off the words at 20.
Hi Ryan,
Many thanks for your helps.
Please take a look at code below. I think I found the right file after 3 days!
the file located in : /modules/mod_janewspro/tmpl/linear/blog_item.php
now when I removing the red line I highlighted in code, that yellow box will disappear. so all I need now is to change this line with a line which limit output words (of ja-tooltips) to 20 words. can you tell me what should I write. I’m not familiar with php.
<?php
/*
# ------------------------------------------------------------------------
# Ja NewsPro
# ------------------------------------------------------------------------
# Copyright (C) 2004-2010 JoomlArt.com. All Rights Reserved.
# @license GNU/GPLv3 http://www.gnu.org/licenses/gpl-3.0.html
# ------------------------------------------------------------------------
*/
$cls_sufix = trim($params->get('blog_theme',''));
if($cls_sufix) $cls_sufix = '-'.$cls_sufix;
$class = '';
if(JRequest::getInt('subcat', 0)) $class = 'subcontents-'.JRequest::getInt('subcat');
$showcreator = $helper->get( 'showcreator', 0 );
$showdate = $helper->get( 'showdate', 0 );
$maxchars = intval (trim( $helper->get( 'maxchars', 200 ) ));
$showreadmore = intval (trim( $helper->get( 'showreadmore', 1 ) ));
$showsubcattitle = trim( $helper->get( 'showsubcattitle', 1));
$params_new = new JParameter('');
$catid = $secid;
$cooki_name = 'mod'.$moduleid.'_'.$catid;
if(isset($_COOKIE[$cooki_name]) && $_COOKIE[$cooki_name]!=''){
$cookie_user_setting = $_COOKIE[$cooki_name];
$arr_values = explode('&', $cookie_user_setting);
if($arr_values){
foreach ($arr_values as $row){
list($k, $value) = explode('=', $row);
if($k!=''){
$params_new->set($k, $value);
}
}
}
}
$introitems = intval (trim( $params_new->get( 'introitems', $helper->get( 'introitems', 1 ) )));
$linkitems = intval (trim( $params_new->get( 'linkitems', $helper->get( 'linkitems', 0 ) ) ));
$showimage = intval (trim( $params_new->get( 'showimage', $helper->get( 'showimage', 1 ) ) ));
$showtooltip = intval (trim( $helper->get( 'showtooltip', 1 ) ));
?>
<div class="ja-box column ja-zintheme<?php echo $cls_sufix;?><?php if (isset($y) && $y==0) echo ' ja-box-first' ?> <?php echo $class?>" style="clear: both;">
<div class="ja-box-inner clearfix">
<?php
foreach ($rows as $i=>$row){
if($i>=$introitems) break;
?>
<div class="ja-zincontent clearfix">
<?php if($showimage) echo $row->image; ?>
<h4 class="ja-zintitle">
<a href="<?php echo $row->link;?>" title="<?php echo strip_tags($row->title);?>"><?php echo $row->title;?></a>
</h4>
<?php if ( $showcreator || $showdate ) : ?>
<p class="ja-zinmeta">
<?php if ($showdate) : ?>
<span class="createdate">
<?php echo $row->created?>
<?php if ($showcreator) : ?> | <?php endif; ?>
</span>
<?php endif; ?>
<?php if ($showcreator) : ?>
<span class="createby"><?php echo $row->creator;?></span>
<?php endif; ?>
</p>
<?php endif; ?>
<?php
if($maxchars > strlen($row->introtext1)) {
echo $row->introtext;
} else {
echo $row->introtext1;
}
?>
<?php if ($showreadmore) : ?>
<p class="readmore">
<a href="<?php echo $row->link; ?>" title="<?php echo JText::sprintf('READ MORE...');?>">
<span><?php echo JText::sprintf('READ MORE...');?></span>
</a>
</p>
<?php endif; ?>
</div>
<?php unset($rows[$i])?>
<?php }?>
<?php if($rows){?>
<div class="ja-zinlinks clearfix">
<strong><?php echo JTEXT::_('MORE:')?></strong>
<ul class="jazin-links">
<?php foreach ($rows as $row){?>
<li>
<span <?php if($showtooltip){[COLOR="#FF0000"]?>class="editlinktip jahasTip" title="<?php echo trim(strip_tags($row->title), '"'); ?>::<?php echo htmlspecialchars($row->image.$row->introtext)?>"<?php [/COLOR]}?>>
<a href="<?php echo $row->link; ?>">
<?php echo $row->title; ?>
</a>
</span>
</li>
<?php }?>
</ul>
</div>
<?php }?>
</div>
</div>
Thank you for providing code, however PHP does us little good :). We need the raw HTML, aka what hte browser outputs. Could you provide that to us?
thanks man. I found the solution.
It solved
Glad you were able to solve it on your own :). For those who search their issue and find this thread, how did you fix it? What was wrong?