If you have done this topic before please add your solution.
Here is what i am trying to do:
I used this solution https://github.com/chrismorata/Responsive-View-Full-Site
but it requires jQuery 1.7+, however chameleon theme includes different JQuery. So, I added following code at the end;
<div class="rwd-display-options">
<span id="view-full" class="rwd-display-option">View Full Site</span>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="../js/rwd-display.js"></script>
</body>
</html>
But this "JQuery.min.js" file causes crash with existing JQuery.
Is there a way to use this "JQuery.min.js" make only work with "rwd-display.js" and dont cause crashes with other part of site.
Related
I'm new to HTML5
I'm trying make my basic paint/whiteboard webpage embeddable to any other website.
The whiteboard consist of three files: index.html, app.js and style.css
what I'm asking for is how to make it more like widget to be embeddable any where?
I have did many searches and get really confused, between building jQuery widget like this
http://alexmarandon.com/articles/web_widget_jquery/#loading-javascript-libraries
or I don't have to as there are many separate files?
any recommendation and guidance would be highly appreciated
Thanks
I think the answer here depends on your target audience.
#lucasnadalutti is correct that an iFrame may be the most universally accepted way to embed an entire HTML page, but if that page needs to interact with the host site's other elements, data, or server in any way, you'll probably want to pursue another approach.
Since you're creating a widget that is meant to be embedded in other people's websites, your target audience is probably other developers, since they will be the ones who might choose to use your widget on the sites they build.
Assuming that developers are your target audience for the widget, you could create a WordPress plugin, a jQuery plugin, or any number of other framework-specific plugins that make it easy for developers to use your code.
The choice is really yours as to what framework to create it for, and that decision is probably based on the place you think the demand for that type of widget would be highest...
But if you're just stating out, I'd recommend creating a jQuery plugin with a public GitHub repo with a well-written README to explain how to use the widget.
Here's a good example:
https://github.com/carhartl/jquery-cookie
EDIT
Per your comment, here are some resources and examples more specific to your needs:
Here'a good resource for how to build a jQuery plugin:
https://learn.jquery.com/plugins/basic-plugin-creation/
Owl Carousel is a good example of a jQuery plugin that requires HTML, CSS, and JS files.
See this link for an example of how to implement the plugin:
http://owlgraphic.com/owlcarousel/#demo
Page setup + CSS:
<!-- Important Owl stylesheet -->
<link rel="stylesheet" href="owl-carousel/owl.carousel.css">
<!-- Default Theme -->
<link rel="stylesheet" href="owl-carousel/owl.theme.css">
<!-- jQuery 1.7+ -->
<script src="jquery-1.9.1.min.js"></script>
<!-- Include js plugin -->
<script src="assets/owl-carousel/owl.carousel.js"></script>
HTML:
<div id="owl-example" class="owl-carousel">
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
...
</div>
JS:
$(document).ready(function() {
$("#owl-example").owlCarousel();
});
I would greatly appreciate it if someone could shed some insight onto a problem I'm having.
The code below is from the footer of a WordPress website I run, and as you'll notice, the second script is invalid. I have no idea where that even came from or how to fix it, and I've searched through many WordPress PHP files (footer.php, index.php, page.php, etc.) to try to find the source, but I'm not sure where it is.
So my question is this: could someone tell me how to find the source of this script? In other words, how can I find out where that second line of code even comes from? I'm not a developer, so sorry if this is a dumb question. Here's the code for you to reference:
<script defer="defer" src="http://echidnainc.com/wp-includes/js/admin-bar.min.js" type="text/javascript"></script>
<script defer="defer" src="http://echidnainc.comhttp//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js" type="text/javascript"></script>
<script defer="defer" src="http://echidnainc.com/wp-content/plugins/easy-social-share-buttons/assets/js/easy-social-share-buttons.min.js" type="text/javascript"></script>
<script defer="defer" src="http://echidnainc.com/wp-content/plugins/easy-social-share-buttons/assets/js/essb-sticky-sidebar.js" type="text/javascript"></script>
<script defer="defer" src="http://echidnainc.com/wp-content/plugins/easy-slide-in/optin-forms-manager/js/placeholder.js" type="text/javascript"></script>
So to answer the general question I posed, to find the source of a line of code placed in the footer of a WordPress page, the first thing to try should probably be the one-by-one deactivation of plugins until the script disappears (and obviously, when the script disappears, then you know the last plugin to be deactivated was responsible). That worked for me.
And now for details on my specific situation's resolution:
A plugin, Speed Booster Pack, was causing the erroneous script:
<script defer=”defer” src=”http://echidnainc.comhttp//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js” type=”text/javascript”></script>
Either that erroneous script or another element of the Speed Booster Pack was interfering with another plugin I recently installed. I tried tweaking some PHP files in the Speed Booster Pack, but ultimately I just deactivated the plugin in order to solve the problem.
I browsed to each of the scripts you mentioned in your post (just pasted the link into my browser to see the JavaScript source). It doesn't seem to be any of those scripts that are adding the tag to Google's hosted version of jQuery.
My suggestion, without knowing the source of the plugins you have in your wordpress, is that one of the plugins is trying to include jQuery, and has an error.
As to why the scripts are loaded at the end of the page, this is a combination of the "defer" tag, combined with a common web development trick that placing tags at the end of the page body facilitates faster load times.
If you could refer to the source code for any of the plugins I don't mind checking to see which one, if any, have the typo. You yourself could attempt to remove plugins one by one to see if one causes the script tag to disappear, and boom, culprit.
The second script is invalid, because the url in the src="..." arrtibute is invalid. I assume you wanted to use jQuery, a JavaScript libary.
To fix that replace
src="http://echidnainc.comhttp//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"with src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"
The jQuery libary hosted by Google.
I have a data access policy(pdf format at a url) in place which I want to show as a pop-up lightbox for the users. The users should scroll down and then agree to it.
I used the bumpbox-2.0.1-min.js and mootools.js files to implement the PDF lightbox but it is not working for me. The code is as below:
HTML
<div class="pure-controls submit_form">
<input id="cb" type="checkbox" required> I've read the
Data Access Policy
</label><br>
<button type="submit" name="edit_value" class="pure-button">Submit Request</button>
</div>
JS
<script type="text/javascript" src="../includes/mootools.js"></script>
<script type="text/javascript" src="../includes/bumpbox-2.0.1-min.js"></script>
<script type="text/javascript">doBump('.bump');</script>
Can anyone please let me know what am i doing wrong over here? Also, how do I make sure the user scrolls down to the end of the page and then hits submit in the lightbox.
Thanks in advance.
You need to use Mootools compat here (jsfiddle versions 1.3.2 or 1.4.5 works for me). Otherwise you get a error for Browser.version.name in the bumpbox .js file.
You can find it here.
This actually works on Mootools 1.2.6, but not on 1.3 no compat.
Demo
I have previously posted this: previous post about having problems to check and uncheck multiple elements with jquery.
The thing is that i have tried the code on fiddle and it's working perfect thanks to all the people who helped me: my fiddle but it is not working on my site.
I have a base.php that automatically loads core plugins, script and so... it's even calling:
<script src="{site_url()}assets/plugins/jquery-1.10.1.min.js" type="text/javascript"></script>
from the view file, i call the js function i use like this: (i use smarty template)
{block name='custom_javascript'}
<script src="{site_url()}assets/scripts/backend/filter-options.js"></script>
{/block}
The thing is that the check/uncheck function is not working. It only works when i call (again) the jquery library like this:
{block name='custom_javascript'}
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="{site_url()}assets/scripts/backend/filter-options.js"></script>
{/block}
even though it works, the style is not the same, because boxes and text appear not in line.
Am i doing something wrong with the library or what the problem could be? thanks on advance.
From your comments, the problem is that your scripts are getting loaded like this:
<!-- page -->
...template header (from base.php)
...your template code
<script src="...filter_options.js"></script> <-- coming from your template
...template footer (from base.php)
<script src="...jquery"></script> <-- coming from base.php
So from this you can see that jQuery does not get loaded until AFTER your script. The problem here is that your script (filter_options.js) depends on jQuery and requires it to be loaded before it can be used.
I would move the jQuery script to the head of your base.php. Ideally, you would move the jQuery script to the head, and leave all other scripts in the footer. This gives you the benefit of always knowing you have jQuery available for use, no matter where you place scripts in your template files.
While creating a website using Twitter Bootstrap's carousel, it seems that some scripts are interfering from it auto-sliding when the website is loaded. But it works fine once you click one of the controls in the carousel. It then slides every 5 seconds, the default time.
I'd rather not post a jsfiddle because of the size, so the production website will have to do (not sure if this is against the rules - otherwise I'll delete it).
Now there are some plugins I'm using (Newsletter and Contact Form 7) which also include scripts from jQuery. I'm not sure how to implement the noconflict from jQuery, or if it will even help.
Can anyone spot the problem?
I got this working by saving a copy of your site to my local drive, I moved the bootstrap .js file to the bottom of the file right above </body> and called the carousel manually so it ends up looking like this
<script type="text/javascript" src="./PRO-Intermediair Your Next Step!_files/bootstrap.min.js"></script>
<script type="text/javascript">
$('.carousel').carousel();
</script>
</body></html>
edit
I posted a copy so you can see http://tctel.com/pro/