I'm trying to load an Aweber form via Javascript inside of a right sidebar widget. The form loads, although it appears differently than the way I designed it in Aweber. I'm 90% sure that it's a Javascript conflict because I loaded the Aweber form in the section with wp_enque_script, and the form looked correct (but I don't want the form to actually appear in the head section itself. The website can be found here: http://www.richmindonline.com/yourunlimitedself.
Obviously, the Aweber script is a direct call for action to grab the web form, so I cannot load it in the or it shows up at the top of my page. So is there a way to load my form in the correct place on the page while still using wp_enque_script to resolve my conflict?
Here's the code for the Aweber form (formatted wrong to fool the text editor). This code is currently found in a "text widget" in the right sidebar:
<script type="text/javascript" src="http://forms.aweber.com/form/74/1378551674.js">
</script>
The actual head section with relevant code is shown below. I don't have any idea as to what I should do here.
<?php wp_enqueue_script('jquery'); ?>
<?php wp_head(); ?>
Also, here is the relevant section of code that is currently un-altered for what I need.
<script src="<?php bloginfo('template_directory'); ?>/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="<?php bloginfo('template_directory'); ?>/js/jquery.jcarousel.pack.js" type="text/javascript"></script>
<script src="<?php bloginfo('template_directory'); ?>/js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="<?php bloginfo('template_directory'); ?>/js/jquery.colorbox-min.js" type="text/javascript"></script>
<script src="<?php bloginfo('template_directory'); ?>/js/functions.js" type="text/javascript"></script>
It'd be difficult to say where it conflicts without seeing errors and line numbers, etc.
This isn't an exact answer to your question, but a potential workaround with the information you provided. Aweber should give you the option to copy and paste the HTML of the form into your widget instead of the javscript code.
The advantage to this is you can edit the HTML to look exactly like you want. The disadvantage is that you would have to go to your website everytime you wanted to update the form as opposed to being able to update it in Aweber.
Related
My problem:
I can display content of a php file including(image background) using iframe. When I go to include my php file using
include("modules/form.php");
or
file_get_contents("modules/form.php");
it displays content, but background image becomes invisible. It is a big site. So, is there any alternate of iframe for this purpose? I do not want to use iframe because my ranking in google is becoming down.
You can't archive this using php , till far i know. PHP is a server side script it does not know anything from the client side. You can use jquery , first you will have to create a div and in it set the content of the page.Use the code below
<head>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js?ver=1.4'></script>
<script type='text/javascript'>
$(document).ready(function (){
$('#divId').load(full url to modules/form.php); // Paste the full url here
});
</script>
</head>
<body>
<div id="divId"></div>
</body>
</html>
Hope this helps you
my problem is quite annoying and weird. I have created a custom Wordpress theme and in the header.php I was loading jquery like this (can't remember why right now):
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript"> google.load("jquery", "1"); </script>
Last night I replaced the code above with
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
and then my site collapsed. I changed it immediately back again, but the problem persisted. I placed some Jquery in the HTML and it works just fine. Then I disabled my plugins by commenting out code in my functions.php file as below:
<?php
if (!is_admin()) {
wp_register_script('custom', get_stylesheet_directory_uri().'/js/custom.js');
wp_enqueue_script('custom');
wp_register_script('blockui',get_stylesheet_directory_uri().'/js/jquery.blockUI.js');
wp_enqueue_script('blockui');
wp_register_script('fancy',get_stylesheet_directory_uri().'/js/jquery.fancybox.js');
wp_enqueue_script('fancy');
wp_register_script('jeasing',get_stylesheet_directory_uri().'/js/jquery.easing.js');
wp_enqueue_script('jeasing');
wp_register_script('friendchooser',get_stylesheet_directory_uri().'/js/jquery.friendChooser.js');
wp_enqueue_script('friendchooser');
wp_register_script('zclip', get_stylesheet_directory_uri().'/js/jquery.zclip.min.js');
wp_enqueue_script('zclip');
}
?>
Still the problem occurs. Any ideas?
There is syntax error in custom.js file in line 30. Just remove } from there.
And learn some about firebug, it's very helpful :)
I want use a jQuery plugin in category.tpl. Put files in javascript/jquery directory. Now, how can use this plugin?
/* one can load JS like that: */
if(file_exists('catalog/view/javascript/'.$this->config->get('config_template').'/script.js')) {
$this->document->addScript('catalog/view/javascript/'.$this->config->get('config_template').'/script.js');
}
It is rather "the proper way" to use existing functions, than to add scripts manually into header.tpl.
As a hint, based upon the answer below - one could loop an array of filenames, in order to keep control over the loading order, which is often relevant while they might depend on each other.
I've never used OpenCart, but a quick google session tells me that you should include the plugin scripts (just like any other js) in a file called header.tpl.
Here is a part of an sample header.tpl-file I found:
<script type="text/javascript" src="catalog/view/javascript/jquery/jquery-1.3.2.min.js"></script>
Just add a the following line below the jQuery include so it looks like this:
<script type="text/javascript" src="catalog/view/javascript/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="catalog/view/javascript/jquery/[PLUGIN FILE NAME].js"></script>
and you should be good to go.
First paste your jquery files, css files and images in catalog/view/javascript/yourplugin folder.
Then call the jquery plug in files in catalog/view/theme/yourtheme(default)/template/product/category.tpl file.
For ex,
YOur php code;..
...
....
<script src="catalog/view/javascript/jquery/jquery-ui-min.js"></script>
<script type="text/javascript" src="catalog/view/javascript/jquery/jquery.anythingslider.js"></script>
<link rel="stylesheet" href="catalog/view/theme/default/stylesheet/anythingslider.css">
<script>
// DOM Ready
$(function(){
$('#slider').anythingSlider();
$('#slider1').anythingSlider();
$('#slider2').anythingSlider();
});
</script>
its for slider.. you can do your action in php (above the script).
You'll need to include JS and CSS sources in Header View (/catalog/view/theme/[your theme]/template/common/header.tpl)
in config.php
define('DIR_JAVASCRIPT', 'D:\wamp\www\opencart/view/javascript/your_dir/');
in header.tpl
<?php
if (is_dir(DIR_JAVASCRIPT)):
if ($handle = opendir(DIR_JAVASCRIPT)):
while (false !== ($file = readdir($handle))):
if (preg_match('#\.js$#', $file)):
?>
<script type="text/javascript" src="<?php echo 'view/javascript/your_dir/'.$file; ?>"></script>
<?php
endif;
endwhile;
closedir($handle);
endif;
endif;
?>
My issue is following: My Partner's have websites and I want that partners can include a script from my server that dynamically generates a link and an image.
i.e.
myscript.php (on my server) generates following output:
<a href="http://www.myserver.com/apples.php?12345">
<img src="http://www.myserver.com/images/12345.png" />
</a>
I don't want my partners to be bothered with any php scripting, hence the best solution for now is to supply them with an iframe, where the src is the link to my script on my server that generates the output above.
However I clearly don't have any control over my partner's website and i.e. opening a lightbox out of the iframe certainly won't work.
Because of that I tried a different approach. I used Ajax to dynamically load my script, however this also doesn't work due to ajax security features (you cannot call an external script via ajax - only if you do a php workaround).
So basically, my question is: Is there any good solution to call my script on my server on the partner's website and display the generated code on my partner's website without the use of php?
Have your PHP generate JavaScript (don't forget the content-type header). Then they can include it with a <script> element.
Make a PHP file, like
<?php
$url = "http://www.myserver.com/apples.php?12345";
$img = "http://www.myserver.com/images/12345.png";
echo "document.getElementById('divthing').innerHTML = '<img src=\"" . $img . "\" /> '";
?>
Your partner's page would be like:
<html>
<body>
Hey, check this site out: <div id="divthing"></div>
<script type="text/javascript" src="http://yoursite.com/script.php"></script>
</body>
</html>
(I know, not really clean code (innerHTML etc), but you should get the idea :))
Could you make it with javascript file which replace/creates that anchor where ever you put the javascript link.
picture.js:
$('#image').ready(function(){
var image = 'http://host/url/to/image.jpg';
$('#image').load(image);
});
on you partners site:
<div id="image">
<script type="text/javascript" src="http://yourhost/picture.js"></script>
</div>
I don't know if it possible, but.. :) and this needs jQuery. And im slow.
I would like to apologize at first instant for asking some stupid question(well not the case for me), but i cannot help it out. i must admit i do not know jQuery but i do have the basic understanding of Javascript and i am a dedicated PHP developer. i don't have any problem understanding the HTML or css. when it comes to jquery i lag it and i dont have enough time to learn it because of the deadline i have to meet.
to start with i developed an application using php and purchased a template from themeforest, now it has some nice and beautiful javascript code the problem is i do not know how to make it work. even though it lies right infront of me. here is my code in the login page. where i want to use this jquery
<link rel="stylesheet" type="text/css" href="css/basicblack.css" title="styles5" media="screen" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/supersleight.js"></script>
<script type="text/javascript" src="js/jquery.example.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/styleswitch.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
$(document).ready(function(){
$(".block").fadeIn(1000);
$(".msg-error").fadeIn(1000);
$(".msg-warning").fadeIn(1000);
$('.msg-error').supersleight();
$('#username').example('Username');
$('#password').example('Password');
});
/* ]]> */
</script>
and now i want to use the fadein effects for the class msg-error and msg-warning in my code, it is not working, here is the combined code with PHP logic which i have used.
although with this i am able to get the desired result like it will show the error if the field is empty or invlalid username and password. but i am unable to use that fadein effect. how do i do that?
<div id="wrap">
<?php if(isset($_POST['login'])) { if( empty($_POST['username']) || empty($_POST['password'])) { ?>
<div class="msg-error">
<img src="images/icons/22/messagebox_warning.png" alt=""/>
<p>Please fill in all of the fields!</p>
</div>
<?php } }?>
<?php
if( isset($_POST['login'])) {
if( !empty($_POST['username']) || $_POST['password']) {
if( !check_login($_POST['username'], $_POST['password'])) {
?>
<div class="msg-error">
<img src="images/icons/22/remove.png" alt=""/>
<p>Wrong username or password!</p>
</div>
<?php } } } ?>
As grossvogel suggests, it is likely that the elements are not hidden to begin with. Bear in mind that if you hide them with CSS, they will be less accessible to users without JavaScript. You could do something like this instead:
<script type="text/javascript">
/* <![CDATA[ */
$(document).ready(function(){
$(".block").hide().fadeIn(1000);
$(".msg-error").hide().fadeIn(1000);
$(".msg-warning").hide().fadeIn(1000);
$('.msg-error').supersleight();
$('#username').example('Username');
$('#password').example('Password');
});
/* ]]> */
</script>
This type of approach is known as progressive enhancement.
My guess is that these items are not fading-in because they're visible to start with. Use simple CSS (display:none) to hide them, then the jquery fadeIn calls should display them once the page is loaded.
update
As others have pointed out, it's probably better to hide the messages with js instead of css, to allow users withough javascript to see the messages.
I'm just guessing here, but the problem might be that, given what I can see here, your "msg-error" divs are already displayed, so they can't be faded in. Try modifying your jQuery like so:
$(document).ready(function(){
$(".block").hide().fadeIn(1000);
$(".msg-error").hide().fadeIn(1000);
$(".msg-warning").hide().fadeIn(1000);
$('.msg-error').supersleight();
$('#username').example('Username');
$('#password').example('Password');
});
You can change these three calls:
$(".block").fadeIn(1000);
$(".msg-error").fadeIn(1000);
$(".msg-warning").fadeIn(1000);
To just this:
$(".block, .msg-error, .msg-warning").hide().fadeIn(1000);
This uses the multiple selector to get all 3 at once, and does a .hide() to hide them just before fading them in. The benefit of this is that if a user has JS disabled, they'll still get the errors, just without a fade.