I have a portfolio page with a list of clients which when clicked on will display the corresponding gallery- all of this happens on the same page. I would like for the client name to be highlighted when the corresponding gallery is shown. I thought a:active would work, but so far isn't. Any ideas? (If it matters, I'm using Wordpress.)
live site
.active {
border: 1px solid #ff893b;
}
<div id="client-list">
<p>
<a href="?page_id=24" <?php if ($_get['page_id']=='24'){echo 'class="active"';} ?> >Häagen Dazs</a><br/>
<a href="?page_id=26" <?php if ($_get['page_id']=='26'){echo 'class="active"';} ?>>Hugo Boss Rodeo Drive</a><br/>
<a href="?page_id=28" <?php if ($_get['page_id']=='28'){echo 'class="active"';} ?>>Ford</a><br/>
<a href="?page_id=30" <?php if ($_get['page_id']=='30'){echo 'class="active"';} ?>>MOCA Contemporaries</a><br/>
<a href="?page_id=32" <?php if ($_get['page_id']=='32'){echo 'class="active"';} ?>>XBOX 360 Halo 3 Sneak Preview</a><br/>
<a href="?page_id=34" <?php if ($_get['page_id']=='34'){echo 'class="active"';} ?>>Saddlerock Smith & Basso Weddings</a><br/>
<a href="?page_id=36" <?php if ($_get['page_id']=='36'){echo 'class="active"';} ?>>Christie's</a><br/>
<a href="?page_id=42" <?php if ($_get['page_id']=='42'){echo 'class="active"';} ?>>Instyle Magazine + Ming by Mango</a></p>
<script type="text/javascript">
$(document).ready(function(){
$('a').click(function(){
$('a').removeClass('active');
$(this).addClass('active');
});
});
</script>
</div><!-- end client-list -->
<?php
if (!isset($_GET['page_id'])) {
$page_id='24';
}else{
$page_id=$_GET['page_id'];
}
?>
<html>
<head>
<title>Lab 1</title>
<style>
.active {
border: 1px solid #ff893b;
background:red;
color:white;
}
</style>
</head>
<body>
<div id="client-list">
<p>
<a href="?page_id=24" <?php if ($page_id=='24'){echo 'class="active"';} ?>> Häagen Dazs</a><br/>
<a href="?page_id=26" <?php if ($page_id=='26'){echo 'class="active"';} ?>> Hugo Boss Rodeo Drive</a><br/>
<a href="?page_id=28" <?php if ($page_id=='28'){echo 'class="active"';} ?>> Ford</a><br/>
<a href="?page_id=30" <?php if ($page_id=='30'){echo 'class="active"';} ?>> MOCA Contemporaries</a><br/>
<a href="?page_id=32" <?php if ($page_id=='32'){echo 'class="active"';} ?>> XBOX 360 Halo 3 Sneak Preview</a><br/>
<a href="?page_id=34" <?php if ($page_id=='34'){echo 'class="active"';} ?>> Saddlerock Smith & Basso Weddings</a><br/>
<a href="?page_id=36" <?php if ($page_id=='36'){echo 'class="active"';} ?>> Christie's</a><br/>
<a href="?page_id=42" <?php if ($page_id=='42'){echo 'class="active"';} ?>> Instyle Magazine + Ming by Mango</a>
</p>
</div>
</body>
</html>
i think what you need is not a:active but instead you should do a:visited.
#client-list p a:visited { border: 1px solid #ff893b; }
html
<div id="client-list">
<p>Häagen Dazs<br/>Hugo Boss Rodeo Drive<br/>Ford<br/>MOCA Contemporaries<br/>XBOX 360 Halo 3 Sneak Preview<br/>Saddlerock Smith & Basso Weddings<br/>Christie's<br/>Instyle Magazine + Ming by Mango</p>
</div>
You could use jQuery. When a link is clicked, add a class, e.g., "current" that highlights that link, and removes the class from all the other links (e.g., whichever one was previously highlighted).
I don't think you can do this purely with CSS. The :active class means you are in the process of actively clicking the link; it doesn't persist after you finish clicking it.
Hey why not use a jquery function like the following for adding and removing classes. It goes like this
Style
#client-list a.clicked
{
color : #ffffff;
/* or what ever style you want */
}
Jquery function
$(function(){.removeClass()
$('#client-list a').bind('click' , function(){
$('#client-list a').removeClass('clicked');
$(this).addClass('clicked');
} )
})
What query does it strip all the anchor tags from the class clicked and add it only to the current one.
Of course if you add specific click id to each anchor tag you can just save the previously clicked anchor.
Related
I am trying to build a website for a friend, I am building it using Drupal 7.
I have a CSS problem that is driving me crazy. The secondary menu, which I float to the right isn't next to my content. Instead it appears to the right below my content.
I feel like I have tried everything. I have the first menu floating left, secondary floating right, and the content on margin auto left and right.
I also tried clear both on the underlying container but it didn't help either.
I am experiencing this error in both Firefox and Chrome.
The only solution i could find online that i haven't tried yet, is to float right before floating left, because I'd have to tinker with Drupal core.
I actually had the problem before, and rebuild the whole damn website, and it happened again while trying to center my components.
I have changed too much since to press 'undo', so it would be awesome if someone with a lot of CSS knowledge could explain me why this occurs.
If you want to see the problem, its on this page www.mohaaleague.com, in the right bottom, but it should be as high as the left menu....
.two-sidebars #content /*the middle element*/
{
width: 827px;
margin-left:auto;
margin-right:auto;
}
#sidebar-second /*the right sidebar*/
{
width: 287px;
float:right;
}
#sidebar-first /*the left sidebar*/
{
float:left;
width: 287px;
}
#main /*the underlying div that holds all the others*/
{
width: 1650px;
margin-left: auto;
margin-right: auto;
position: relative;
clear: both;
}
btw I started from BARTIK theme.
Okay, so I managed to solve it by changing page.tpl.php,a ctually it was something I adressed in my question.
The problem was that float right was being called, before the float left. So I changed the order in which Drupal renders the page. By making Drupal render my second-sidebar first, and then my first-sidebar, and then the content i solved the problem.
I changed page.tpl.php in my themes templates directory like this, if you are reading this and have the same problem change the order of the code to this:
<?php if ($page['sidebar_second']): ?>
<div id="sidebar-second" class="column sidebar"><div class="section">
<?php print render($page['sidebar_second']); ?>
</div></div> <!-- /.section, /#sidebar-second -->
<?php endif; ?>
<?php if ($page['sidebar_first']): ?>
<div id="sidebar-first" class="column sidebar"><div class="section">
<?php print render($page['sidebar_first']); ?>
</div></div> <!-- /.section, /#sidebar-first -->
<?php endif; ?>
<div id="content" class="column"><div class="section">
<?php if ($page['highlighted']): ?><div id="highlighted"><?php print render($page['highlighted']); ?></div><?php endif; ?>
<a id="main-content"></a>
<?php print render($title_prefix); ?>
<?php if ($title): ?>
<h1 class="title" id="page-title">
<?php print $title; ?>
</h1>
<?php endif; ?>
<?php print render($title_suffix); ?>
<?php if ($tabs): ?>
<div class="tabs">
<?php print render($tabs); ?>
</div>
<?php endif; ?>
<?php print render($page['help']); ?>
<?php if ($action_links): ?>
<ul class="action-links">
<?php print render($action_links); ?>
</ul>
<?php endif; ?>
<?php print render($page['content']); ?>
<?php print $feed_icons; ?>
Intro:
I have a page designed simply with html and css, mostly just div's with css to mold the div boxes.
I want to integrate only the blog posts of a wordpress blog site into this page. Everything in the design is to be the same except for one (large) div that contains the "imported" posts. I do not want this div to contain it's own scrollbar, as if it's a window to the wp site. I want the whole site to expand vertically, determined by the height of the wp blog posts, whatever they may be.
I have used the method provided here: http://moshublog.com/2005/07/05/integrate/2/
to incorporate the blog, this has worked.
Problem:
The div containing this the blog posts ("the loop") does not expand vertically. It simply cuts the blog post(s) off as if they are not detected. The height is set to 100% on the div containing it and any div's parent to that one.
Question:
How can the div containing the wp blog posts expand vertically based on the height of those blog posts?
What I've tried:
- - - Overflow:hidden; I have floating elements on the page. I have tried every possibility with overflow:hidden;, which was suggested in any other questions I could find. This did not change anything.
- - - Making body and html height=100%. This did not change anything.
- - - Changing the height of the div containing it and any of the parent div's to a fixed height. This changed the height. If it was larger, then more of the blog posts were seen. The posts are there, just cut off.
Here is the code:
<!-- Main Body Start -->
<div class="clean" style="width:1200px; height:100%; border:0px; margin:0 auto;">
<!-- Body Column One Start -->
<div class="clean" style="width:950px; height:100%; float:left;">
<!-- Blog Integration Start -->
<div class="clean" style="width:946px; height:100%; max-width:946px; border-style:none solid; border-color:#99AAFF;
border-width:0px 2px; float:left; overflow:hidden; background-color:#ffff77;">
<div class="clean" style="width:926px; height:100%; margin:0px 10px;">
<!-- WP Blog code goes in here -->
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<h2>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php
the_title_attribute(); ?>">
<?php the_title(); ?>
</a>
</h2>
<small>Posted in <?php the_category(', ') ?> on <?php the_time('F jS, Y') ?> by <?php the_author() ?> –
<?php comments_popup_link('Be the first to comment', '1 Comment', '% Comments'); ?>
<?php edit_post_link('Edit', ' | ', ''); ?> </small>
<div class="entry">
<?php the_content('<span class="more">read more »</span>') ?>
</div>
<?php if(is_single()) {?><p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?></p><?php } ?>
</div>
<?php endwhile; ?>
<div class="navigation">
<div class="alignleft">
<?php next_posts_link('« Older Entries') ?>
</div>
<div class="alignright">
<?php previous_posts_link('Newer Entries »') ?></div>
</div>
<?php else : ?>
<?php include (TEMPLATEPATH . "/searchform.php"); ?>
<?php endif; ?>
</div>
</div>
Everything below "wp blog code goes here" to "?php endif; ?" is from the wp blog site, and is "the loop".
Thank you.
Don't set the height of the divs, doing so will limit them to the height you set them, having said that, if you set the height to 100%, the div will fill 100% of the area of its container, not 100% of its contents, so for the outermost div this will be 100% of the window.
I have just built my first WordPress theme, the only thing I can't seem to work out is how can I tell WordPress to make menu links with the class active when it is on the page? This is the code I had for the static page:
function curPageName() {
return substr($_SERVER["SCRIPT_NAME"],strrpos($_SERVER["SCRIPT_NAME"],"/")+1);
}
<?php if(curPageName() == 'index.php'){ ?>
<li class="current">
Home
</li>
<?php } else{ ?>
<li>
Home
</li>
<?php } ?>
I have still got this code in the WordPress theme, but it is not working at the moment, I am thinking I could probably make it work as it must have something to do with the exact links, but I'd also like the built the menu in WordPress so that would require me to get rid of this code..
Anyone know what I can do or link me to something that will help me out?
The best way is to assign a page name to the body tag of your page identifying it. Then use php to assign an active class if the page matches.
CSS
a.active:hover {
color:#000;
border:1px solid #000;
background:#fff;
}
HTML
<body <?php $page = "one" ?>>
<div id="navbar">
<ul>
<li><a<?php if($page == 'one'): ?> class="active"<? endif ?> href="one.php">Page 1</a></li>
<li><a<?php if($page == 'two'): ?> class="active" <? endif ?> href="two.php">Page 2</a></li>
<li><a<?php if($page == 'three'): ?> class="active" <? endif ?> href="three.php">Page 3</a></li>
<li><a<?php if($page == 'four'): ?> class="active"<? endif ?> href="four.php">Page 4</a></li>
</ul>
</div>
In the above example page one will be active
I want to make the easiest css for menus. There's an outer div and an inner anchor. If the outer's class is the same as the inner's id, that will be active styled.
Example code:
<div class='<?php echo $_GET['menu']; ?>'>
<a href="index.php?menu=menu1" id='menu1'>Menu 1</a>
<a href="index.php?menu=menu2" id='menu2'>Menu 2</a>
<a href="index.php?menu=menu3" id='menu3'>Menu 3</a>
<a href="index.php?menu=menu4" id='menu4'>Menu 4</a>
<a href="index.php?menu=menu5" id='menu5'>Menu 5</a>
</div>
and I don't want to write a lot of css, like:
.menu1 #menu1, .menu2 #menu2, .menu3 ....
{ /*active stlye*/}
so I want the following: if the classname is the same of the id under it would be active.
Thanks in advance.
You can't do that with CSS ; maybe you could instead use PHP to accomplish something close :
<?php for($i=1;$i<=5;$i++){ ?>
<a href="index.php?menu=menu<?php echo $i;?>" <?php if($_GET['menu'] == 'menu'.$i) echo 'class="selected"'; ?>>Menu <?php echo $i;?></a>
<?php } ?>
And the CSS :
.selected{
/*active style*/
}
Edit : a solution with PHP is better than one based on JS because : everyone will see the .selected class, even people who have JS deactivated + for the others, the menu will not blink. Honestly it is super annoying to see a menu CSS changed via JS.
That's not possible. CSS isn't a programming language, you have to fully specify every selector.
But since you already work with PHP it would be a lot easier if you apply the class to one of your anchor tags:
<div class='<?php echo $_GET['menu']; ?>'>
<a href="index.php?menu=menu1" <?php echo $a_class[1]; ?> id='menu1'>Menu 1</a>
<a href="index.php?menu=menu2" <?php echo $a_class[2]; ?> id='menu2'>Menu 2</a>
<a href="index.php?menu=menu3" <?php echo $a_class[3]; ?> id='menu3'>Menu 3</a>
<a href="index.php?menu=menu4" <?php echo $a_class[4]; ?> id='menu4'>Menu 4</a>
<a href="index.php?menu=menu5" <?php echo $a_class[5]; ?> id='menu5'>Menu 5</a>
</div>
You have to either specify a bunch of selectors or add code to your PHP script.
Let's suppose I got you well. Then an answer could be :
<div id="menu">
<?php
for($i = 0; $i < 5; $i++) {
if(isset($_GET['menu']) && $i == $_GET['menu'])
echo " Menu $i";
else
echo " Menu $i";
}
?>
</div>
And in your CSS
#menu a {
/* Whatever you want for your normal links */
}
#menu .menu_active {
/* Whatever you want for your active link */
}
And that's it !
I'm not sure exactly what kind of script I need for this, hopefully someone on here knows.
On the home/archive pages of a wordpress powered blog I am building I have a grid of thumbnails (featured images) only. Instead of these linking to the actual post/page, I'd like them to trigger a lightbox type of element that has a description of the post/page.
From there, the user would be able to either continue (via read more) to the post or close it and continue searching the grid.
Any insight is greatly appreciated!
Pure CSS Solution:
<body>
<div id="featured-grid">
<?php
if(have_posts()) : while(have_posts()) : the_post();
$default = '<img src="'.get_bloginfo('stylesheet_directory').'/images/default_thumb.jpg">';
$thumb = has_post_thumbnail() ? get_the_post_thumbnail() : $default;
?>
<div class="post-block">
<div class="post-thumb">
<a class="hover-trigger" href="#"><?php echo $thumb; ?></a>
</div>
<div class="post-preview lightbox">
<div class="preview-wrap">
<a class="featured-image" href="<?php the_permalink(); ?>"><?php echo $thumb; ?></a>
<?php the_excerpt(); ?>
</div>
</div>
</div>
<?php
endwhile;endif;
?>
</div>
</body>
<style type="text/css">
.post-block{width:300px;height:300px;}
.post-thumb{width:100%;height:100%;margin:10px;float:left;}
.post-thumb *{display:block;width:100%;height:100%;}
.lightbox{
display:none;
width:100%;
height:100%;
background:rgba(0,0,0,0.4);
position:fixed;
top:0;
left:0;
}
.preview-wrap{width:960px;margin:0 auto;position:relative;top:40px;background:#FFF;}
.post-block:hover .lightbox{display:block;}
.post-block:hover .post-thumb{display:none;}
</style>
This is EXTREMELY rudimentary and is largely untested. Overall, this should get you started in the right direction. Hope this helps!