How does one gets the jQuery UI layout plugin to work? - javascript

I am willing to use the jQuery UI layout plugin (layout.jquery-dev.net) to make 2 resizable <div>. It would be just the center and east panels we can see here.
From the documentation I could make the simplest layout to work :
<script type ="text/javascript">
$(document).ready(function () {
var oOptions = {
applyDefaultStyles: true
};
$('body').layout(oOptions);
});
</script>
<body>
<div class="ui-layout-center">Center</div>
<div class="ui-layout-east">East</div>
</body>
But when I try my own thing (with both panels resizable by dragging the vertical divider), it stops working entirely.
var oOptions = {
closable: false,
resizable: true,
slidable: true,
center__minWidth: 200,
east__minSize: 200
};
I have no background in JavaScript and I might just be dumb asking here. But from what I understood when reading the <script> at the demo page (same as above), it should works fine with the resizable option only.

Using jQuery 1.9.2 did the thing.

Related

fullpage.js and wordpress integration

I have a site:
URL: http://362.a07.myftpupload.com/
Password: aynhoe_park
I'm trying to make the scroll force to go from section to section instead of a normal page scroll.. I have tried setting in the fullpage.js (http://alvarotrigo.com/fullPage/) and I can't seem to get it to recognise it.
Can anyone have a look and help me get this working? As I can't seem to see why I can't get the page to scroll from one section to another like the fullpage.js site.
The problem lies with a misplaced ,.
This is your code currently
<script type="text/javascript">
$(document).ready(function() {
$.fn.fullpage({
anchors: ['home','aboutus','ourblog','yourhost','thecollection','thehouse','exclusivehire',]
menu: '.nav',
scrollOverflow: true,
});
});
</script>
The anchors has an extra , in the [] but there isn't one after to say there are more elements coming.
Try this:
<script type="text/javascript">
$(document).ready(function() {
$.fn.fullpage({
anchors: ['home','aboutus','ourblog','yourhost','thecollection','thehouse','exclusivehire'],
menu: '.nav',
scrollOverflow: true,
});
});
</script>
jQuery Problem
Try this:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#fullpage').fullpage();
jQuery.fn.fullpage({
anchors: ['home','aboutus','ourblog','yourhost','thecollection','thehouse','exclusivehire'],
menu: '.nav',
scrollOverflow: true,
});
});
</script>
Ok found the solution. The code I was using was wrong. It ended up being this jQuery library I needed to use : https://github.com/guins/jQuery.scrollSections
Which was
<script>
jQuery(function() {
jQuery('section.section').scrollSections();
});
</script>
With the accompanying js files.
Thanks for all your help :)

D3,js dialog modal not working any more

I have a google map with popup alerts which used to work but for some reason isn't now.
It is supposed to be modal and have an x to close it. It ought to expand to include all text. This worked before but not any more.
It has a close button instead of the x. The text overflows the size of the window.
I copied the code from a working map but that did not help.
Here is the code:
function prettyAlert(p_message, p_title) {
p_title = p_title || "";
$(p_message).dialog({
title: p_title,
width:400,
height:200,
resizable: true,
modal : true,
close: function(ev, ui) {
$(this).remove();
}
}).css("background", "lightgrey");
}
What could have broken this code. (It is embedded in a Drupal 7 page.)
I resolved this by completely removing the various jquery libraries I had added to the Drupal configuration and using the explicit definitions in the code. I must have introduced something that conflicted with the behaviour of alerts.

Can we hide all the data before page load using Accordion page type?

In given below link when we refresh our page it briefly shows the expanded version before it collapses on its own. Is there a way to have it immediately be collapsed?
http://new.cgwealth.com/staff
Below are JS Code links:
http://new.cgwealth.com/pages/js/jquery-1.7.2.min.js
http://new.cgwealth.com/pages/js/accordion-jquery-ui.min.js
<script type="text/Javascript">
$(document).ready(function () {
$(".accordion").accordion({
autoHeight: false,
navigation: false,
collapsible: true,
clearStyle: true
});
});
</script>
CSS link: http://new.cgwealth.com/pages/pages/css/accordion.css
So i want to hide all the data until my accordion functionality works.
Thanks in advance
i had the same question in my last project, but i have no idea about that. Then i use a very ugly method to fix this. When i load data from my server, i add class named 'hidden'(css:display:none), and it had a effort that all data, just like text or images, all hide. And after all data loaded, i call jquery function accordion and remove class 'hidden'.
So i use this method to fix. Maybe it is valid for you.
You have to hide the content through css, and then enable the content to be show via javascript. Here is one working copy
http://jsfiddle.net/aneeshrajvj/FcHEC/

SlidesJS hide pagination

I am using Slidesjs to use a simple scroller on my site. However, I cannot hide the pagination that shows the 1 and 2 bullet points.
The link for the project is www.barterscloset.com
I have tried trying to hide it in css and in a Jquery.hide function.
Thanks in advance!
There's an option built in, add these lines to where you fire the plugin:
pagination: false,
generatePagination: false
so your whole call would look like this (if you had no other otpions set, that is)
$(function(){
$("#slides").slides({
pagination: false,
generatePagination: false
});
});

jCarousel and Fancybox

On one of my content pages, I'm using the jCarousel and Fancybox JQuery plugins.
The problem is that only one of them works at a time, so I think there must be a conflict.
This is the code used:
<script src="js/jquery.jcarousel.min.js"></script>
<script>
jQuery(document).ready(function() {
jQuery('.showcase').jcarousel({
start: 1
});
});
</script>
<script>
$(document).ready(function() {
$('.fancybox-form').attr("href", "contact.php").fancybox({
"width" : 400,
"height" : "90%",
"autoScale" : false,
"transitionIn" : "elastic",
"transitionOut" : "elastic",
"type" : "iframe"
});
});
</script>
Is there a conflict between the "jQuery(document).ready(function()" of the jcarousel script and the "$(document).ready(function()" of the fancybox script?
Any help on how to overcome the conflict (if this is the problem) would be appreciated.
Thanks, Mark.
It appears your problem is in the fact that jCarousel moves images in and out of view - causing a problem with fancybox. So the answer is that you cannot easily use both together (without re-writing the fancybox plug-in).
I would look at using a different carousel that already has the expand pop-up feature built-in.
On a side note, I would place all of the code in either
jQuery(document).ready(function()
or
$(document).ready(function()
for cleanliness.

Categories