My layout is like the above.
1, 2, 3 and 4 divs can be dragged and dropped into any position 1-4 and in the dock. Now these are just php includes. When i drop them in the dock i use css to:
display:none;
This hides everything in the div except the title. Perfect. However the content is still being loaded in the "background" and i plan on having plenty of these "widgets" and i can see this becoming a serious issue with loading all these content.
What i would like to happen is:
If dropped into dock then don't load everything between:
<p><?php include('example.php'); ?></p>
But if dragged back into 1, 2, 3 or 4 then allow the content in the paragraph to be loaded.
I was thinking maybe getting the parent div using jQuery.
I just need a little push in the right direction in regards which language could solve my issue and maybe some simple examples. Now another thing would this be "dynamic" as in as soon as i drag it from the dock to 1, 2, 3 or 4. It would instantly update or would i need to constantly reload either the page or this div to allow the content to check its location and decide whether it is allowed to load or not.
Thank you.
If you want to find out what element you are landing in when you do the drop, it's ->
$('element').droppable({
//other logic
drop: function(event, ui){
//$(this) is now the element you just dropped nito
if($(this).prop('id') == 'dock'){
console.log("This is the Dock...We don't add content here.");
}else{
//function to pull data to your container...$.load() or whatever
}
}
});
Related
I'm working on this [page][1]
The problem is that Homepage has a lot of items to show, so it loads really slow. The solution I found is to use lazy load on images (I'm using this plugin). It works on the left column (Which is not content included. You can see the images load as you scroll down) but it is not working with the items of the center and right columns which is the content I'm including.
I'm including the center and right column content this way:
<?php include("parts/backbone_tmpl_productos_main.php"); ?>
And this is the contents of the backbone_tmpl_productos_main.php file:
<script id="tmpl_Post" type="template">
<div class="image"><img src="<%= post_item.image_url.url %>" /></div>
<div class="obra_meta">
<span class="nombre_artista"><%
_.each(taxonomy_product_cat, function(item){
if(item.parent === 146){%><%= item.title %><% }
if(item.parent === 216){%><%= item.title %><% }
})
%></span>
<span class="nombre_obra"><%= title %></span>
</div>
<div class="descripcion_obra"></div>
<div class="buy_opts">
<?php if (ICL_LANGUAGE_CODE == 'en') {
echo '<div class="precio pull-left">From: 24.99 €</div>';
}else{
echo '<% if(price != "") {%><div class="precio pull-left"><%= price %></div><% } %>';
}
?>
<div class="pull-right"><button class="btn btn-default boton_comprar comprar"><?=__('COMPRAR');?></button></div>
</div>
</script>
I think the problem that the plugin doesn't work with the include content is because the content is loaded after the plugin loads.
Any idea what's the real problem? how can I fix it?
This wordpress plugin - https://wordpress.org/plugins/unveil-lazy-load/ uses the data-src attribute for lazy-loading. Hence,
Change
<div class="image"><img src="<%= post_item.image_url.url %>" /></div>
To
<div class="image"><img data-src="<%= post_item.image_url.url %>" /></div>
Reference - https://github.com/luis-almeida/unveil/blob/master/jquery.unveil.js
Lazy loading is a JavaScript (browser-side) effect. If has nothing to do with the "include" in PHP.
Basically PHP generates the page, including all includes, and passes to browser. Browser then executes JS and initiates lazy loading.[1] The exact method with how PHP generates the page is irrelevant.
Where the problem lies is most likely with the fact you have another script that appears to be positioning the "product" classes absolutely - presumable from the "datos" object you have in code. The datos script itself might be forcing the loading as otherwise it won't know the size in order to position them - check what's going on in this script.
Also, there's no guarantee what script is going to win; when your lazy-load script runs through all the products, finds they are "top 0" which is "above the fold" and so loads the images straight away. Then the datos script presumably then goes and positions those products below the fold, but it's too late, they are loading (if not already loaded). Can't be sure of the exact mechanics, but this is the most likely scenario.
Solution:
Firstly, check the datos script isn't forcing a load in order to position the item. If it is, do you really need them absolutely positioned? Why not let them flow, then you can remove the src as below? If you do need absolutely position, I think it's "tough".
Secondly: Assuming the datos script is not forcing a load, copy a bit of what coding-idiot suggested, and move the "src" into "data-src", but then you need to modify the lazy-load script to pull the image from there. The code references a "settings.data_attribute" but there is nothing in the documentation. A quick read suggests that setting "dettings.data_atribute" to "src" may work, or ask the developer how to use those settings. (You may also need settings-placeholder at the same time). But by moving out of "src" and into a data attribute you stop the browser from loading initially and let the script do it's job, because...
Finally: Add a timeout in the lazy-load script so it triggers after the other script that positions the products.
Other note: Plugins are great, but if you have this many, you'd probably be better off programming some of these yourself. They appear to conflict. Also, the lazy load plugin could be improved by storing/caching the $(element) jQuery object as opposed to repeatedly recreating it. You also have malformed HTML by adding scripts after the HTML closing tag. Some small improvements that may encourage you to dig deeper into exactly what is going on.
[1] Note: to avoid comments, this is simplifying things as it IS possible to get JS to start before the entire page is loaded; buy you have the include at the bottom of the body so argument is mute.
You could try to add later-reload-script to reload any failed to load
images, that sometime the server refuse to process the incoming request.
Here is the workaround that help me solved the problem.
Add below javascript snippet in your template or view page
function reload_img(idx, no_of_try)
{
console.log("Reload fired " + idx);
var MAX_RETRIES = 100;
var glob = true;
$.each($("img"), function(index, value){
if ( this.naturalWidth == 0)
{
$(this).attr("src", $(this).attr("src"));
console.log( $(this).attr('src'));
glob = false;
}
} );
if ( !glob && no_of_try < MAX_RETRIES )
setTimeout(function(){ reload_img(idx + 1, no_of_try + 1); }, 1500);
}
setTimeout(function(){ reload_img(1,1); }, 1500); // start the reload_img() here
The code simply checks if an element is loaded and rendered.
If not, then retry to load the image with max of 100 retries.
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
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 have searched but could not find answer to my satisfaction so
I have a header file, which is being included on top of every page and part of the header is a menu with 3 tabs, when user click on tab browser take them to that page (working fine), what i want is, that what ever tab user clicks to be highlighted(diff back color) when that page is loaded.
Here is html :
<div id="top-choicebar">
<ul id="topmenu">
<li><a href="daily.php" class="ww" >Daily</a></li>
<li>< href="weekly.php" class="ww">Weekly</a></li>
<li>< href="monthly.php" class="ww">Monthly</a></li>
</ul>
<div id="event-menu">
New to php and jquery ... any help will be greatly appriciated
You can do that by means of CSS and conditional classes.
Weekly
Monthly
you can try using something like this, but it's very rudimentary:
<?php if (preg_match("/weekly.php/i", $_SERVER["SCRIPT_NAME"])) {
// Tab should be highlighted
< href="weekly.php" class="ww active">Weekly</a>
} else {
< href="weekly.php" class="ww">Weekly</a>
}
?>
this will add an 'active' class to the link, that you can then style with CSS to change the background colour...
What I've always done in the past is pass a parameter to the class that is building the menu based on what page I'm loading.
So daily.php loads up Header.php and passes it a variable like new Header(0) when Header builds the html, it loops through the links to print them, and on the number that's been passed, it adds a class like current.
So if:
Daily == 0
Weekly == 1
Monthly == 2
The header would pick the correct one to apply the class to based on the page that calls it.
Of course, this would only work if your menu links are being stored somewhere besides raw HTML, like in a database or even just an array.
Have a class setup like .selected{background-color:red} That defines the different background color you want to view. Then when you render the page, since you already know which tab it is, you just render the selected tab with that class attached. If you are rendering the tab content through ajax you can just find all tabs with class "selected" and then add the class to the selected tab
$("#topmenu li").live("click", function()
{
$("#topmenu").find(".selected").removeClass("selected");
$(this).addClass("selected");
});
I'm trying to place multiple resizable and draggable div's on one page that move (vertically) inside their own parent div.
you can take a look at http://bit.ly/bCutBE
However, these div's act really strange when I want to resize them, especially from the north side, they kind of move out of the screen very fast, while they shouldn't be able to get outside the parent div.
I only want the div to be able to move and resize vertically inside it's parent, the dragging-part works pretty good, but the resize part give this problem.
I can't really describe it better than this, but take a look for yourself and it will be clear immediately when you try to resize one of the coloured div's: move it a little downwards and try to resize it from the north side.
the problem seems to be caused by the containment: 'parent', line of the resizable. when I delete this line it works fine, but then the coloured blocks don't stay in their parent, and I want them to stay inside their parent.
I hope someone can help me with this...
the jquery code I used:
$(document).ready(function(){
$(".move")
.draggable({
containment: 'parent',
grid: [50,50],
axis: 'y'
})
.resizable({
containment: 'parent',
grid: [50,50],
handles: 'n, s',
minHeight: 50
});
});
this seems to be a bug with draggable and sortable you will find a workaround here