I'm working on a website that gets content dynamically from a database and puts them in the HTML code, which should consist of JQuery Mobile pages so I can click a link and it will slide to the corresponding page.
I'm running JQuery 1.9.1 and JQuery Mobile 1.3.1 to get the slide effect to work, but it's giving me an error saying "t.split is not a function". It also shows a large "LOADING" text in the middle of the page without any javascript there.
Am I missing something?
Edit:
I've chosen to ignore this for now. Nobody is responding anymore and the problems are only getting worse.
I've managed to solve the question by first running a simpler version with only the essentials for making a 2 page'd JQuery Mobile example. The problem was that using only numbers for an ID isn't accepted, and I was missing the JQuery Mobile CSS file which allowed for the transition that I was looking for.
I've applied those solutions to this project and it works.
Related
I'm totally new in website development and as my first experiment I'm working with website to replace my company's old site (if success).
Have done pritty much allready but I really want to have this popup image gallery to work with Magnific popup for the responsiveness.
I have setup a local server with QuickPhp for development as I don't have server for my website yet.
Eventhough my site is working when tested in CodePen but not on my Quickphp server.
I made sort of gallery site that contains images that is supposed to open to popup for larger view and to zoom closer if wanted. The popup itself will work but some of code doesn't work. In example:
-not showin close button.
-not closing popup when clicking background.
-no animation when popup opens.
this all works with the same code tested on the CodePen-site though.
Magnific popup JS and the CSS codes I copied from the Build tool(to the folder within the sites .php)
They are included to .php page with script. CSS in the head and the JS in the footer. JQuery is from google https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js
For now I would need answears to theese Questions:
1. Is it possible that the problem is within the QuickPhp-server setup of mine? If It doesn't fully support jquery in local setup?
2. What else could be wrong?
If needed I can put the codes here later.
The problem was in the code allthough. I implemented the codes from the Maqnific website again and red the documentation over 5 times. I also noticed that the included stylesheet files needed to be linked from the website's root folder exactly as shown on the Macnific guide.
If anyone is having similar problem I suggest to keep on reading and searching. Taking a brake for day or two makes a differens in perspective too. Some time apart of the project helps to notice things that you might not have seen before. Especially checking the code for incorrections is a bitch.
Just yesterday I found a typo in my media query meta tag that was making my site not to change styling when viewport size changes. The typo was from 2 weeks ago. max-device-width was written as max-divice-width.
I'm currently working on a project that uses the Web Experience Toolkit. I have a page with a table that's populated by an add button which opens a LightBox window (colorbox plugin) which has my form.
I've used both the standard Lightbox and the IFrame version. IFrame version is what I'm currently using because I figured it'd have the best luck and be easiest to develop everything in.
Currently the Code is functional as is....meaning window opens, form works, submit works, window closes and refreshes page.....However on the submit the Web Experience Toolkit doesn't work.
The validation that is shown is that of the browser. Which means instead of the label changing to demonstrate an error and the list of errors appearing above the form a tiny bubble shows up for a single error.
I've followed the documentation to the letter.
Form Validation documentation
Has anyone had any success applying the validation to the lightbox? How did you do it?
Two part problem to this:
Loading the JQuery validation library twice from W.E.T. files
Interfered with validation
Chrome and Firefox bug with Jquery Validator library that W.E.T. utilizes
After much research discovered that this bug hasn't been fixed yet.
Solutions:
Load W.E.T. Jquery validation once
This got the errors to display properly
Don't validate numbers
The bug in the validator library is specific to numbers in Chrome and Firefox
I have a jQuery Mobile application, and on certain pages, such as for example this one: "http://olkensway.se/upplevdinkommun/activities.php?community_id=6&category_id=1", I'm facing a problem. When the page is loaded the first time, it shows correctly, but the problem occurs when I refresh the page (by pressing F5). Try and see for yourselves. The search field re-sizes and becomes much larger than what is supposed to be. This problem occurs both in my desktop browser (Tested with Google Chrome and Internet Explorer) and my mobile browser (Google Chrome as well). Using Google, I haven't found anybody with the same problem yet. I'm new to both jQueryMobile and web design in general. Is this a problem with my PHP, HTML or CSS. Some conflict with jQM? Please tell if I should show more code than what is available by viewing the page's source.
EDIT: It can be worth telling that I have other pages, not using any PHP, where this isn't a problem. So it's likely come conflict there...
When I load the page, the search thing is taking up the entire page. After inspecting the element in chrome, the article element's font size is 200% (.ui-body-c) . When I unchecked that it went to a "normal" size. I'm not sure exactly what you want it to look like, but maybe that's your problem? hopefully that helps
Intro: I'm a newbie on both php and Javascript and have been trying to solve this issue for my site (another version of this issue here), but have had trouble putting into effect the answer by LocalPCguy.
(in short: the issue is that with infinite scroll activated, the social buttons work on the first posts that are loaded, but do not work for posts loaded subsequently).
I am working off of a WordPress them, and I've added my social buttons to an existing php file that generates most of the appearance of each post. I seem to be adding them to the right place because the buttons appear where I want them to on each post (only for the first ones on the page). Like the other two guys who posted about this problem, I am using digg digg as my social plugin.
Currently the code in the php file that generates the social buttons looks something like this:
<div class="sharing-button">
<?php dd_google1_generate('Compact (20px)') ?>
</div>
Like I said, this makes the button appear for the first posts that are loaded, but once the infinite scroll tries to load additional posts, the social button will not appear on those posts.
For now I have tried the following:
Add the code below just above or below (taken from the answer here), or inside my <div> containing the buttons in the php file.
if (typeof gapi !== "undefined") { gapi.plusone.go(); }
That didn't work I figured it was because a .php file would need some kind of signal to know that it needs to run a javascript operation. So I looked around and found a couple suggestions on how to do this, here and here. In neither case did I manage to get the buttons to appear appropriately. Below was what seemed like the least idiotic of those attempts:
<?php
echo '<script type="text/javascript">
if (typeof gapi !== "undefined") { gapi.plusone.go(); }';
echo '</script>';
?>
I also thought perhaps I needed to pass an argument into gapi.plusone.go(), and I tried passing my sharing-button <div> above, but that did not work either (php code inside a javascript script inside a php block... didn't have high hopes).
At this point I'm not sure what to do - I feel like the solution is probably quite simple but I'm completely stuck, having spent hours reading threads about javascript integration into php and the like.
Does anyone have an idea how I can go about applying that Javascript solution to my .php dependent Wordpress theme?
Many many thanks!
Short Answer: this is not possible.
Long Answer:
FIRST comes PHP, SECOND comes javascript.
The PHP "program" is run at the Server, which is you web provider's server. This server works out all the PHP stuff. After this one is finished, the files of the Website are sent to your computer. It contains, among other stuff, javascript.
And this javascript is only run on YOUR computer, the one you're looking at. Once your Browser loaded the page and starts running javscript, it's already too late to ask the Server for some more info.
There are techniques allowing for that (AJAX is the Keyword), but that's another question :-)
You need to initiate the javascript of the buttons for them to work since infinite scroll loads the next set of posts using ajax. One example I found but it only does it for facebook if the plugin uses FBML:
$(document).ajaxComplete(function(){
try{
FB.XFBML.parse();
}catch(ex){}
});
I'm using a custom implemented Like Box from facebook and infinite scroll and this works just fine.
I am working on a page and having problem with the Fancybox close action for the Image gallery in the first button at the bottom, the gallery is closed but overaly is still there. Here is the test link
How ever the same settings are working for the second link "Floor Plan".
Secondly I am using a Tiny Scrollbar plugin for the gallery on the page. The thumbs on the left side have blue scroll bar if they are larger in contents. This scroll bar does not appear in Google Chrome, and sometime don't show up even in other browser if the page loads first time, then I have to refresh the page to show it. Any idea about the problem will be greatly helpful.
Thank you!
First off, I noticed you're suing jQuery 1.3, why?
Here's 1.6:
http://jquery.com/
It isn't that much larger, and its an updated library. That may fix your problem.
If that didn't work, then delete the fancybox.js, re-downlod and put it in again, same with css. Make sure the css is called at the end of your css document.
If that doesn't work, I suggest getting rid of your javascript files one by one until there is only fnaycbo xleft, it's obviously some conflicting code at this point, so you'll have to troubleshoot by trial and error, going through one by one to findout what script is preventing close. I don't have access to your server, so I can't test it.
It's most likely in main.js, so remove that first, and see if fancybox works then!
ETA: Scrollbar fix.
The problem is something is adding a disabled selector, it's javascript. But you could change up tinyscrollbar.js to fix it, or you could go to your css, find the line:
'#scrollbar1 .disable {display:none}
and remove that line entirley, it's causing your scrollbar not to appear in browsers the javascript is (for some reason) disabling in.
In my case I solved with the next modification:
$(document).bind("load", function() { $('#myTinyScrollbar').tinyscrollbar(); });
Well you have an error in console:
d.onClosed is not a function
It could be because:
Your using an old version of jQuery possibly not supported by Fancybox. Try updating to 1.6, though beware legacy plugins or code that could break due to the steep upgrade.
A compression issue. It's possible i.e. the Google Closure could of removed what it saw as "unneeded" code and therefore broke the functionality. Try using uncompressed Fancybox to see if it fixes it, if it does then you know this the issue, rather than your jQuery version.