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;
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)
In a PHP file which outputs an HTML form, I am wondering if I can use new HTML5 tags, for example the email input type. Will oldest browsers show some error or should I somehow discriminate with PHP, through USER_AGENT for example, and render:
<input type="text" />
instead of
<input type="email" />
in old browsers (BTW, the same question would apply to the DOCTYPE itself, I guess). Which is the most appropriate according to specifications?
Fortunately for us, a workaround exists that allows old browsers to recognize these new elements allowing them to be styled, and thus giving us full use of these new semantic tags. It’s a tool called HTML5Shiv.
As noted on the linked Google page, “shiv” and “shim” are interchangeable terms in this context.
But how did we go from IE not even acknowledging the existence of this element, to now being able to use it?
The trick is that calling document.createElement("section") will suddenly cause IE to recognize the section element. No one knows why, but it works and you don’t even need to use the node returned by that function.
But you need to make sure to call it early on in your website before any of those elements are used, otherwise it won’t work.
You will need to call it for each and every new HTML5 elements like the following code:
"abbr article aside audio bdi canvas data datalist details figcaption figure "+
"footer header hgroup main mark meter nav output progress section " +
"summary template time video"
.replace(/w+/g, function(a){ document.createElement(a) });
Notice we’re using the replace method of the string object to succinctly iterate over each contiguous length of characters matched by the regular expression and executing the callback function for each character block which in turn calls createElement.
Here on in, we’ll call this method, “shivving the document”, so that the document can render the new HTML5 elements.
And its better to you use newer versions of browsers unless you're reaserching something with old browsers! :D
Thanking you!
In case there is a library that could help you to use the "new tag" on older browsers HTML5 Shiv
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
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.
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>.