Depending on selections made by the user 1 of a number of php scripts are added to my page via jquery. To do this it adds it's contents to an existing div.
Each of these php come with a link tag adding a CSS file.
My question is, if I empty that div with jquery will the CSS file's effect on the page be removed too? Will any elements then effected by this CSS file revert to their original style?
I ask because this div can be filled and emptied any number of times and the CSS will clash if it remains. And because uploading it to where it is tested is time consuming, so I don't want to attempt something that definitely won't work.
If you remove the link tag that points to a css file, the css rules contained in the files will be removed with it, so if you empty the DIV, the css rules that were contained in the div will be removed.
I ask because this div can be filled and emptied any
number of times and the CSS will clash if it remains
What I would do (with jQuery) is add/remove the class(es) that clash with the CSS depending if the DIV is empty or not, something like :
function myToggle() {
if (!$.trim($("#myDiv").html()).length) {
return 'green'; // returns a specif class when empty (can be fake with no effect)
} else {
return 'red'; // add class when is filled
}
}
See JSFIDDLE
That would be simpler than adding/removing CSS files
Related
I have coded PHP script to generate PDF with text contents using TCPDF library. First, the script gets the contents from database and creates temporary .html file. Then the script gets the contents from the .html file and writes to create PDF document.
However, the problem here is it doesn't know when to break a page. So, it looks something like in the image.
I want the script to break the page when the title comes at the bottom of the page and move it to the next page.
There is a function called $pdf->AddPage(); that breaks the page.
Is there any solution to this? Please help.
Have you tried page-break-after CSS property ? Add this to the DIV which is just above the title. So the style of the above DIV will look something like this.
.DIV_CLASS {
page-break-after: always;
}
The page-break-after property sets whether a page break should occur
AFTER a specified element or not.
always value of the property inserts a page break after the element.
Update:
To make sure your particular section/DIV doesn't get divided between pages. You can make use of page-break-inside property.
Use it like this,
.DIV_CLASS {
page-break-inside: avoid;
}
Above CSS will make sure that DIV with class DIV_CLASS will never get divided among pages.
The page-break-inside property sets whether a page break is allowed
inside a specified element.
avoid value of property avoids page break inside the element (if possible)
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.
In my responsive WordPress theme using Twitter Bootstrap, I'm trying to use a technique similar to CSS Conditional loading but relying on PHP instead of Javascript minimize from so many requests loading.
What I'd like to do is use PHP to detect the :after pseudo element content property to see which element is loading based upon the media query/viewport size of the browser.
Here's example CSS:
body:after {
display: none;
/* Default */
content: "A";
}
#media (min-width: 35em) {
body:after {
content: "B";
}
}
To be very specific, if PHP can detect that content: "A" is active, it will load custom_mobile_content() hook which renders mobile content. If it detects content: "B", it will load custom_desktop_content() hook which renders more desktop content.
I tried using the javascript version but it requires I put a large block of formatted HTML into a javascript variable and upon rendering of the page there's a huge block of text that's inactive and unused on the page contained within the javascript. PHP seems to be a better fit.
Is there code which can produce this easily?
EDIT: It appears that I'd have to pass a JS variable or function to PHP in order for this to work, and I suppose that's pretty complicated.
Here's the javascript I'm trying to work with:
$(function() {
var currentSize = "A";
$(window).resize(function() {
var size = window.getComputedStyle(document.body, ':after').getPropertyValue('content');
/* Ridiculous thing to deal with inconsistent returning of
value from query. Some browsers have quotes some don't */
size = size.replace(/"/g, "");
size = size.replace(/'/g, "");
if (size != currentSize) {
if (size == 'B') {
$(".content").load('<?php custom_hook(); ?>');
currentSize = 'B';
}
}
}).resize();
}
I've included the above code in the WordPress page itself because it doesn't need to be cached in a file. It is only used once and on this page. However, the problem with this is that the custom_hook() code is rendered on the page and that hook includes a bunch of markup. If the javascript determines that I'm using A, all that markup is on the page in the source code for no reason. I want to find a way to prevent the custom hook from rendering UNLESS it's being used in B. Hope that makes sense.
At the moment there's no reliable way to detect pseudo-elements, even in JavaScript. They have no CSS Object Model (CSSOM). PHP can't help you in this situation either because it acts only server-side.
For an alternate workflow, you can use JavaScript to find out which media query is currently active. Based on this you can load other resources if necessary.
See this article on MDN for details on how to work with media queries from JavaScript.
Opening
I have several forms (in this case two) that are located in tabs using Ext-JS.
I also have jQuery framework which I use for main javascript script/programming.
last is an Javascript object global instance(single) that holds state.
the instance called obj have properties of:
obj.fileID;
obj.manID;
obj.womenID;
method
1. now I issue a post to the DB with fileID and using it's response i make a new object.
that holds current file,women and man IDs.
2. after that I want to upload a file (an image in this case).
using Uploadify I bind to an input element of file type.
I wanted to either update scriptData when building that new object.
or catch the onComplete and use that.
there I want to issue another post to the PHP file that will update the DB for location of the file uploaded
problem
started when the non-visible input tag could not be updated.
because flash had to loaded again.
I don't mind using a different flash uploader but I request a solution for this problem.
Arye.
It sounds like you are hiding the SWF. In FF and WebKit, if you do a display:none on a SWF, then display:block (or whatever) the SWF reloads. And I don't think it's something that will change.
If you need to hide the SWF move it off the page with something like: left:-9999px
Also, I'm sure swfUploader allows you to post variables along with the file. So perhaps this can be done in one call.
You can use CSS to hide it.
visibility:hidden;
left:-9999px;
Any of these should work, display:none will make it inactive on the DOM in most cases, so it's best to avoid using it when you need to update the element.
Option #1 - Will not effect positioning on the DOM
position:absolute;
left:-9999px;
Option #2 - Also will not effect positioning on the DOM.
position:absolute;
visibility:hidden;
Option #3 - Will effect position on the DOM.
margin-left:-9999px;
or
visibility:hidden;
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>.