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.
Related
I have a Wordpress site which displays the post's content using
<?php the_content(); ?>
there are images and text in the content which all get outputted in < p > tags
I want to style the margins/padding of the images and text differently. I can target the images but when I apply styles to the text, they affect the images as well.
The only options I can think of are using - margins (but that will cause problems later) and putting all text in block quotes but that will remove that functionality for future use.
can i 'pull out' the images and/or text out of the_content and display them another way?
HTML - currently
<div class="row">
<?php the_content(); ?>
</div><!-- /row -->
You can do it in several ways:
My prefered one is the follow:
Let's say that you have a div with a css class (i.e.: content wrapper)
So it will look like this:
<div class="contentWrapper">
My amazing conent <img src="amazing.jpg"/> <p>testing paragraph</p>
</div>
So in this example you can use simple css selectors to make any change that you want for the elements under contentWrapper i.e.:
.contentWrapper img, .contentWrapper p{
margin-right: 5px;
}
Another - but much dirtier way is using regex to replace some tags.
It's not a good practice at all, so I don't thing there is a point of an example.
Good luck!
Basically two sane ways to go about this:
Modify the existing CSS and tune it to target both the elements and the classes more precisely. That's the easier way.
Capture the output of the_content(); into a variable and then use preg_replace() etc. to modify the content. Or use a proper DOM parser in PHP to do the same. More work here.
(Use Javascript to modify the DOM after it's loaded. Less elegant approach.)
Use preg_replace to pull the images, remove the <p> tags and replace them with something else.
function filter_content_images($content) {
return preg_replace('/<p>\\s*?(<a .*?><img.*?><\\/a>|<img.*?>)?\\s*<\\/p>/s', '<div class="content-image">\1</div>', $content);
}
add_filter('the_content', 'filter_content_images');
This will remove them and replace with which you can then mini
I'm editing a website that contains an image slider that displays two images side-by-side, however when i view the website in chrome the images are not inline with each other like so: http://i754.photobucket.com/albums/xx182/rache_R/Untitled-1_zps6f3014ef.jpg
I use php and html to get data from a database and display the images based on the data gathered. I have tried to target the images individually in my css but it either doesn't work or effects both images.
Is there a correct way of targeting the images individually or how can i fix this?
php code:
<?
$result = $mysqli->query("SELECT * FROM stock");
while($obj = $result->fetch_object())
{
if($obj->id&1)
echo "<u1>"; ?>
<li class="<?=$obj->orientation=='landscape'?'landscape':'portrait'?>">
<img src="./img/<?=$obj->description=='unframed'?$obj->poster_no:$obj->poster_no.'_frame'?>.jpg" alt="">
<h4><?= $obj->description=="unframed"?"Unframed Poster - 750mm x 500mm":"Framed Poster - 790mm x 540mm"?><br />£<?=$obj->price?> each</h4></li>
so i managed to solve it:
#media screen and (-webkit-min-device-pixel-ratio:0){
#mi-slider li {
vertical-align: top;
}}
Place the < ul> having a width so much that it can hold both images side by side and give style='display:inline' for the ul.. You will get the images inline
This is more of a css question.
You have one of to options, using an inline list or a float.
personally i line inline list, you could also use a table but that is considered bad practice.
You could also use java script to calculate the position, which is also bad practice if used improperly.
W3schools.com should be a good reference if you dont know how to implement these properties in css.
Next time please replace your php with static information so it looks better :) cheers
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'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.
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.