I'm using wordpress and I used a plugin called "meteor slideshows" that I believe is jQuery. I'm trying to absolutely position a widget over the slideshow, however, it is not functioning correctly.
this is my template code:
<div class="headersliderarea"> <!-- beginning of placing postitnote -->
<div style="clear:both;"><!-- start slideshow --></div><!-- end clearboth -->
<?php if ( function_exists( 'meteor_slideshow' ) ) { meteor_slideshow(); } ?>
<div class="postitnoteimagearea"><!-- postitnote widget -->
<?php if ( !function_exists('dynamic_sidebar') ||
!dynamic_sidebar('PostItNote') ) : ?>
<?php endif; ?>
</div><!-- end postitnote widget -->
</div><!-- end placing postitnote -->
I also put the site online over at: http://fortmovies.com/pestcon/
If you look at the homepage where it says "test" is the widget that I am trying to display over the slideshow, which you can't see. you can make it visible if you mess with firebug a little bit I think.
But I have no idea how to display it over the sildeshow.. part of me thinks it's not possible because it's a slideshow php plugin that I'm using to insert it into the template... or maybe I'm missing a simple code?
Absolutely positioned elements are positioned relative to the closest parent element that also has a defined position I.e. relative, fixed, or absolute. So in This case you need to define the position of the slides container most likely, and then place your custom element within the container.
You could just wrap a container div around where the plugin gets inserted in the template, and position your element that way, or you could use the structure provided by the slideshow plugin.
Also don't forget about the z-index. Once inserted into the slideshow container your custom element will need to have the greates z-index value without interfering with any links. This can get tricky when dealing with positioned elements that overlap, so make sure that when you get it working, all your links and buttons are still clickable.
Edit 1
Okay so first of all, your .postitnoteimagearea should have a z-index of 99 or greater. And I am not too sure that your slideshow plugin is working properly. It doesn't seem to be appearing. Even when I messed around with the css, it seems to only show one image that is has a visibility property of "hidden". Does the slideshow work for you? Also you don't want to adjust the visibility of the slideshow by giving it a lower z-index value, you simply want to give the element that you want in front of it, a greater z-index value.
CSS. You need to give the widget div a higher z-index than the z-index of the slideshow. A z-index is essentially a layer level, so if the z-index of the slideshow is 1 but the z-index of the widget is 2, the 2 will take precedent over the 1 and be the top layer.
Related
I'd like to be able to show or hide content in a sidebar based on the height of the adjoining content div, but i'm not exactly sure if/how it can be done.
For example, on the blog page of my current project (http://djryanmcnally.pixelworx.it/?page_id=18) I have two widgets in the sidebar (one for latest tweets, and one for latest music news) however, as you can see on this page, the content of the blog posts (all test posts...) are much longer than the height of the two widgets, and would of course, get larger as more posts are added. This leaves a certain amount of blank space below the last widget in the sidebar, which I would like to fill based on the height of the adjoining #content div.
Suppose, for example, I also wanted to put into the sidebar some other content divs, such as #latest-pics, #latest-mixes and #latest-events but only if the adjoining content was large enough to create space for them, how would I do that?
I thought about using inline styling with variables, such as: (Pseudocode)
$i = #content(height);
if $i > 500px { $display1 = 'inline' }
else { $display1 = 'none' }
elseif $i > 1000px { $display2 = 'inline' }
else { $display2 = 'none' }
elseif $i > 1500px { $display3 = 'inline' }
else { $display3 = 'none' }
.......
endif;
and using <div id="latest-pics" style="display:<?php $display1 ?>;"> etc...
But, I highly doubt that would be anywhere even close to doing what i want, but, y'know, thought process, etc! lol!
I could of course use a floating sidebar that moves down as the use scrolls, but it'd be a nice touch to be able to do this somehow!
Any thoughts?
p.s - excuse the sketchy code example, i'm typing in a rush as I have to go to work!
Thanks in advance! :D
This was mind bugling for me too ;) That's why I created a simple java script plugin that removes last widget or widgets from sidebar until sidebar height is equal as a content height.
This way you can add as much widgets as you want, and they will be removed if content is not high enough.
It works by default with Twenty Thirteen theme but you can use plugin settings to adopt it to any theme. It's called sidebarAutomizer and can be found at wp repository - http://wordpress.org/plugins/sidebarautomizer/
Definitely looks like a javascript kinda thing. You want a vertically responsive layout, which is close to impossible to do with pure php. The webserver loads the php code first then runs the javascript; meaning you can't reference javascript variables with your php.
Looks like your theme already has jquery installed so you might as well work with that.
In my opinion, I'd have all the divs on the side bar there but make sure they are all hidden (style="display:none"). Once the page has loaded and the content div is on the document, you can grab the height of the main content div on the left with
var h = $('#main').height();
Now the tricky part is knowing how the content in each of your sidebar widgets is going to be populated. You might want to put some limits on that to make things easier, or else you're going to require alot more post processing.
Once you know how you are going to handle the heights of you individual widgets, and what tier schema you want them to show in, you can show them as simply as
$('#widgetId').show();
Where '#widgetId' is going to be the id="" attribute on your div that you originally set to display: none.
So it would end up being something like
if(h > 100) $('#widget1').show();
if(h > 300) $('#widget2').show();
...
ect
If some of the widgets are too tall (say the widget2 is 500px usually) then you can set the height of the widget with javascript and handle the overflow however you'd like. You can use a overflow-y:scroll but that'd look pretty ugly, maybe just overflow:hidden, and make sure the height is at a consistently asthetic place for the widget.
I was going to do some commenting for suggestion; however, after some thoughts, I decided to go for answer area.
I think it is totally achievable. (Pseudocode)
set up sidebar area with fixed sidebar items with divs and define empty sidebar divs for other hidden content.
(empty divs for hidden content: ...)
Loop start: get total scrolled_height by jQuery ($(window).scrollTop() + $(window).height()).
get used_space_height including header and sidebar height
calculate the available_height by (scrolled_height - used_space_height)
see if next sidebar div height can fit into avaiable_height or not:
4.1. if yes, load next sidebar div => go to step 5.
4.2. if not. => go to step 6. end
load next sidebar div with ajax call to return content => go back to step 1.
Loop End.
Execute the above steps in javascript/jQuery by detecting that user stops scrolling.
Hope this helps.
I don't even know whether this is possible, however, I am hoping that JavaScript could provide a solution to this problem. I have a DIV, that shows the title for each page within a WordPress template that I am working on.
<div class="grid-block" id="page">
<div id="page-info">
<h3>#<?php is_home() ? bloginfo('description') : wp_title("",true); ?></h3>
</div><!-- #page-info -->
</div><!-- .grid-block #page -->
The text that is called into the DIV comes in at various lengths, and sometimes over-exceeds the DIV. When the text exceeds the DIV, it wraps, just as it should, however, I am attempting to adjust the 'height' of this DIV, after a word is wrapped. I do not know if I could add some type of eventListener or something, however, pure HTML and/or CSS does not seem to have the components I need to solve this problem.
In addition, I understand that I 'could' use #media (media queries) to sort of emulate this effect, however, as far as I know, this can only be done in relation to the width of the Window, and I want the DIV to re-size 'only' when a string exceeds the width of this DIV. A demo of what I am attempting to do can be found at http://jsfiddle.net/justinbyrne001/SP3Q2/4/. I appreciate any comments, recommendations, and advice that anyone has regarding this matter. Thanks in advance.
Do you need the fix height on #page-info? If you just use padding:10, the div#page-info would automatically wrap around the text.
I'm trying to learn wordpress and php.
Basically, I want the
function draw_ad() {
echo "IMAGE CODE INSIDE A DIV";
// echoing an image inside a div -- StackOverflow does not allow me to post img tags : )
}
add_action('the_content', 'display_ad');
===
Basically, I want to add a picture and be able to manipulate the "left" and "top" css options... but with a plugin. So it will be like a strange picture that covers whatever the area on the screen that I want it to cover :P.
Yes, it is kind of sloppy, but that's what I was asked to do : P.
The add_action('the_content', 'display_ad') kind of does it, but it removes the whole content.
Is there a better way to do this?
Is there a way to tell the wordpress PLUGIN to add this , say, before the theme's header, and not content? (As in, be able to put this thing wherever you want to in the html body tags?
Thank you, guys!
From theme developing I am sure you can add code to the header and at the end of the body tag. (wp-header, wp-footer)
The best thing is to insert the picture tag at the end of the body and style it with position:fixed;. You don't need a div around the img tag.
I'm embarking on a major project, but am stuck on a tiny issue at the very start. I'll try to be as concise as possible.
I have a PHP script that will be echoing into the footer of the page (the last stuff before </body></html> a bunch of <div>s containing visible buttons and <div>s containing hidden dialog boxes.
The plan is to have the buttons float in the upper-right corner of corresponding <div>s in the main content area of the page. i.e. - button-1 echoed into the footer will float in the corner of content-box-1, and will be tied to the hidden <div> 'dialog-1'.
I'll be using jQuery and jQuery UI Dialog throughout the page(s). I'm not sure if that's particularly relevant to this question, but thought it worth mentioning just in case.
So my question, put simply, is how do I echo a <div class="button">Button 1</div> into the footer with PHP, but have it float in the upper-right corner (with maybe 5px margin) of <div class=content>Content 1 is full of content</div>?
A picture says a thousand words:
As shown above, I want the little blue gear button things in the corner of content pieces, locked and loaded with hidden <div>s containing dialog boxes.
I've found plenty of info on how to float divs on top of divs, but all the examples I saw showed the <div>s in close proximity to each other in the page source; not with a hundred lines of source code between the two <div>s
I'm not sure if the solution is pure CSS, pure jQuery/jQueryUI or a combination of the two.
Any advice will be much appreciated.
Thanks!
You will want to set the position of the floating to to:
position:absolute;
Then set the left and top of the div to some location near the 'gear', you can get the position from the position method.
var node = $('#gear');
var position = node.position();
var dialog = $("#dialog");
dialog.css("left", position.left);
dialog.css("top", position.top);
dialog.fadeIn("fast");
Something similar to this might work.
Edit: This has some flaws, after a resize the dialog will be out of position, the reason you see the original div so close to the 'gear' is because they use position:relative on the gear and then position the dialog absolutely.
When an element is absolutely positioned from within an element that is already relatively or absolutely positioned it is now positioned relatively to it's parent element rather than the window element
Dialog is positioned 10px relative to the top left of the #gear div:
<div style="position:relative" id="gear">
<div style="position:absolute;top:10px;left:10px" id="dialog"></div>
</div>
Dialog is positioned relative to the top left of the window:
<div id="gear">
<div style="position:absolute;top:10px;left:10px" id="dialog"></div>
</div>
There is probably no reason not to move the dialog to a position within the gear before it is displayed, just append the dialog within the gear, $("#gear").append($("#dialog"))
On my Drupal site, I have made a Users page using the Views module, which is simply a nicely styled grid (HTML table) of users. I'm displaying a few fields for each one, and both the name and the profile picture have been set to link to the user node.
What is the best way to change it so that the whole cell (HTML td) links to the user node? EDIT: I'm not concerned with adding the HTML link tags, but with accessing each profile page's URL.
I've looked into modifying the theme of the view (over-riding the Style output e.g. views-view-grid--users.tpl.php), but cant see an elegant way to get the URL of the user node.
EDIT: I've implemented a temporary solution in javascript which looks into the HTML of each cell, extracts the first link's URL, and uses that, but is there not a better way of doing this using the Drupal variables somehow?
Thanks for your help.
How about something like this...no JavaScript needed
In your table:
<td>the link</td>
...
In your CSS file:
.td_link {
display: block;
width: 100%;
}
So basically all you need to do is add a class to your link, and a small snippet of CSS.
OK I found a better (super simple) way of extracting the profile URL, and also I over-came a few issues with the whole block-link solution (attributed to espais), which I thought were worth documenting. So here is the complete solution to my original problem:
1) Add a custom template file to override views-view-fields.tpl.php (see http://views-help.doc.logrus.com/help/views/using-theme - thanks to barraponto for the useful link). In this custom file, you should wrap all the code in a link, and add a clear-fix div just before the end to stretch the link to the full height of the container.
<a class="td-link" href="user/<?php print $row->uid; ?>">
...
<div class="clear-fix"></div>
</a>
2) Now you need to get rid of any other links from inside each grid element, as you are not allowed to nest HTML links (produces really weird behaviour). First thing to do is edit the View, and make sure none of the fields have "link this field to it's user" checked. Then if you want to include the profile picture field, you need to add a small fix module because by default there's no way to stop this field being a link! You can get the module from this comment: http://drupal.org/node/720772#comment-2757536
3) Finally the CSS. Add the following to your theme's style.css:
a.td-link {
display: block;
color: #000;
text-decoration: none;
border: 1px solid #E9EFF3;
}
a.td-link:HOVER {border-color: #85b3d4;}
a.td-link label {cursor: pointer;}
div.clear-fix {clear: both;}
This removes the link formatting from the text (as we want the whole block to look like a link, not just the text), and stretches the link out to fill the container. It also makes the cursor graphic consistent, and adds a nice border effect when you mouse-over the block. Remember you can also add a custom CSS class to your View, which makes it much easier/neater to select elements for styling in your CSS code.
It's important to distinguish between actual links, with <a> tags, and arbitrary elements you can click. Even if you don't care about semantics, you should care about your visitors not running JavaScript, especially search engines.
Rather than turning a block element into a link, you should turn a link into a block element, as espais suggested. One way to get more control over the markup is using custom fields to add opening and closing tags for your link around the rest of your fields.
spais and scott-reynen are right. but instead of placing every field under multiple <a> elements, each styled with css to turn them into blocks (which can have margin and padding), why not use a single <a> element?
if everything is meant to link to the same place, you can place it all together under a single <a> element, although every element should be an inline element (<span> instead of <div>). you can do it by changing the row template: check http://views-help.doc.logrus.com/help/views/using-theme
in your case, copy templates from inside the views module to your theme folder, and rename it accordingly as your view "Theme: Information" says. make sure there is no <div> or <p> or any other block element being output. if you need to break lines, use <br>.