$(document).ready(function(){
$("a[rel='box']").colorbox();
});
and
jQuery('a[href*=#]').live('click',function() { ...etc...
total NOOB question:
I have these two functions in JQuery...
How do I combine them ?
a[href*=#] is a slideshow presentation and a[rel='box'] is for a colorbox to open...
one or the other works but not both together.
That is what I get for trying to "cut and paste" code...
the Jquery is loaded
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"> </script>
<script type='text/javascript' src='scripts/jquery.colorbox-min.js'></script>
in the HEAD section
I even tried to add:
jQuery(function(){
if(jQuery.isFunction(jQuery.fn.colorbox)) {
jQuery("a").live('click',function(){
jQuery(this).colorbox();
});
}
});
but this didn't work either...
This is where I got the slideshow... www.pixedelic.com/plugins/camera/ colorbox is loaded, but doesn't work on individual pictures...
Any help would be GREATLY appreciated and thanks!
The problem was defining $ in jQuery NOT an A conflict with READY and LIVE...
I think your copy of jquery.min.js is corrupted, it doesn't define $.
Your jQuery script ends with jQuery.noConflict();, that prevents defining $.
So you have to write jQuery(document).ready() instead of $(document).ready()
You can't write $.noConflict() after you already have jQuery.noConflict() in jquery.min.js.
SOLUTION:
jQuery(document).ready(function($){
$("a[rel='box']").colorbox();
});
NOT:
// cannot below use if have jQuery.noConflict(); ! use above notice large Q //
$(document).ready(function(){
$("a[rel='box']").colorbox();
});
THANKS! Barmar!
Related
I am a beginner and I have a static page where I want to include other Html files. Like the header, footer, some buttons, and a form that I am using on more than one page.
I am not allowed to use the server-side for this exercise. So I tried using jQuery but it didn't work.
But I also would like some way to include these files without making a wrapper for them. But will be happy even with the wrapper divs if you guys help me with that.
I have not used jQuery before but I feel like a have tried every way that I found. You can see all of them below.
I am using jQuery 3.5.1.min if it is of importance.
$(".header").load("_header.html")
$(function () {
$(".header").load("_header.html");
});
function unWrapPlaceholder() {
$(this).contents().unwrap();
}
$(function () {
$("#header").load("_header.html", unWrapPlaceholder);
});
$(function(){
var includes = $('[data-include]');
jQuery.each(includes, function(){
var file = '../views/' + $(this).data('include') + '.html';
$(this).load(file);
});
});
<div data-include="_header"></div>
I don't want to use the object tag or iframes. Are there any suggestions or corrections you can give me?
I would really appreciate the help.
The file location was the problem! In the end I used the second jQuery code.
Here’s what I do in an ordinary html file.
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/test.js"></script>
Now, I’d like to see this reflected in WordPress. So in my functions.php I do this:
function theme_files(){
wp_enqueue_script('jquery',get_theme_file_uri('js/jquery-3.3.1.slim.min.js'),NULL,'1.0',true);
wp_enqueue_script('popper',get_theme_file_uri('js/popper.min.js'),NULL,'1.0',true);
wp_enqueue_script('bootstrap',get_theme_file_uri('js/bootstrap.min.js'),NULL,'1.0',true);
wp_enqueue_script('ui',get_theme_file_uri('js/jquery-ui.min.js'),NULL,'1.0',true);
wp_enqueue_script('ownJS',get_theme_file_uri('js/scripts.js'), array('jquery'), '1.0',true);
}
add_action('wp_enqueue_scripts','theme_files');
Unfortunately it doesn’t work. I already found out that its not the dependency in my own js (scripts.js). It doen’t matter whether I do NULL or array(‚jquery‘). Also, I tried to only enqueue my own js without the others. Doen’t seem to change a thing.
Suprisingly, when I do alert(’test’); in my scripts.js it does pop up. But when I do
$(„#idOne“).click(function(){
alert(‚hello‘);
});
Nothing happens when I click on the element with the id=„idOne“
Even when I do pure js
function sayHi(){
alert(‚Hi‘);
}
var one = document.getElementByID(‚idOne‘);
one.addEventListener(‚click‘,sayHi, false);
it doesn’t do a thing ether. What do I do wrong?
Thanks!
I really enjoy the disabling of entire fieldsets, it's quick and simple. While testing my code in the 5 major browsers, I realized that Safari and IE (sort of) do not support disabling entire field sets. http://www.w3schools.com/tags/att_fieldset_disabled.asp
Is there an alternative to this fieldset attribute? Maybe a way to disable all fields within a fieldset one by one? If so, how?
Thank you!
You can use JavaScript or jQuery to disable the inputs inside the fieldset.
jQuery Example (put this at the bottom of your page):
<script>
$(function () {
$("fieldset").find("input").attr("disabled", "disabled");
});
</script>
or if you want to disable a single class or id you can do:
$(".className").find("input").attr("disabled", "disabled");
$("#elementId").find("input").attr("disabled", "disabled");
To use with a radio button you can do something like this:
$("#radioButtonTrue").on("click", function () {
$("fieldset").find("input").attr("disabled", "disabled");
});
$("#radioButtonFalse").on("click", function () {
$("fieldset").find("input").removeAttr("disabled");
});
I have been playing around for ages with this and it does not seem to work.
I am looking to add a hidden voucher code function to my site and have it so that the code is actually hidden until the "click to reveal" button is clicked and user's browser opens a new window.
I have a test page with exactly what i'm talking about.
my trouble is, everything works but the actual voucher reveal bit.
Any ideas, or any link on how to do this?
Your page looks like you're trying to use jQuery code, but you have not added jQuery to your document, and thus are receiving errors like Uncaught ReferenceError: $ is not defined.
See jQuery: The Basics on how you can set up your page to point to jQuery properly.
As Jonathan Newmuis pointed out, your missing the jQuery lib from your code. Which that is issue one, issue two is I don't see the fancybox plugin being called in either.
so where you have this bit
<script type="text/javascript">
$(document).ready(function () {
$(".popUpCode75554").fancybox({
'overlayOpacity': 0.7,
'enableEscapeButton': false,
'hideOnOverlayClick': false,
'hideOnContentClick': false,
'showCloseButton': true,
'frameWidth': 520,
'frameHeight': 400,
'overlayColor': '#000000',
'callbackOnClose': function () {
$('.voucher-code-revealed-75554').show();
$('.voucher-buttons-75554').hide();
}
});
$(".cashbackWarning").fancybox({
'overlayOpacity': 0.7,
'enableEscapeButton': false,
'hideOnOverlayClick': true,
'hideOnContentClick': false,
'showCloseButton': true,
'frameWidth': 500,
'frameHeight': 250,
'overlayColor': '#000000'
});
});
try {
var pageTracker = _gat._getTracker("UA-11279427-1");
pageTracker._setDomainName("none");
pageTracker._setAllowLinker(true);
pageTracker._trackPageview();
} catch(err) {}
</script>
add the following above it.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="http://yandex.st/jquery/fancybox/1.3.4/jquery.fancybox.min.js"></script>
not sure how old/new that particular fancy box version is compared to the one you are attempting to use but I think it may be the newer of them. Anyway. adding those 2 lines may solve your problems unless the code you have otherwise currently is flawed somehow which doesn't appear to be the case at the moment.
On another note, if you use firefox might I suggest getting yourself an addon called firebug, it will aid you in debugging javascript based errors as well as other things.
Is there any way to write script in css and call or execute it whenever required ?
I need a <script> tag to be executed .
i need something like this..
css code
#execute{
<script> ..some script.. </script>
}
so whenever i use
<html>
.
.
.
.<div id="execute" />
.
.
.
.
</html>
so if i change the script changes will be reflected everywhere.
Is it possible?
EDIT:
Is it possible to keep my <script></script> tags inside some js file and i will host it. and then i will call some function() from my HTML so that the script will be executed everywhere i need it.
Can someone show me any example, tutorial how i can do it.
I don't have much information about the Js file and how the function should be called.
Thank you all
Does it have to be in CSS? jQuery is a great, simple way to do what you're asking. You put all your style information in the CSS (what it's intended for) and keep your javascript in the html or a .js file. Take a look at http://jquery.com. The code would look something like this
$(function() {
$('#execute')
.someCoolFunction()
.anotherCoolFunction();
});
You use $(function() { /* code */ }); to run the code when your document is ready, and you use $('#execute') to grab the element with the execute tag. You can then do a lot of cool javascript really easily with that jQuery element.
No, you cannot mix CSS and Javascript this way. Why would you want to?
If you simply want a common JavaScript include, do it like this:
<script type="text/javascript" src="yourscript.js"></script>
You can't do this in standard CSS.
There is a way in which you can run code from within the CSS context, using a technology called 'Behaviours', referencing an HTC file (which is basically Javascript) in the stylesheet.
However, this technology is non-standard, and only exists in IE. It is therefore only really used to write hacks to make IE support features that it doesn't have which are in other browsers. An example of this in use is CSS3Pie.
If you're working on a site which will never be used in any browser other than IE, and you're happy to use a non-standard technology, then you may consider this to be the exact answer to your question. However I would strongly recommend you don't do this.
More realistically, you should be using a Javascript library such as JQuery, as the functionality you describe is pretty much standard fare for JQuery.
With JQuery, you would write code like this (in a normal script block, not in the CSS!):
$('.execute').each(function() {
/* your code here; it would be run for each element on the page with the class of 'execute' */
}
As you can see, it uses a CSS-style selector syntax to select the elements to work with.
(also NB: I've used execute as a classname here, not as an ID, because you imply that you want more than one of them -- note that you should never use the same ID more than once in any HTML page; it is invalid. If you need the same thing several times, use a class.
JQuery has functionality to watch for changes to elements, respond to events such as clicks or mouse over, and much more. Other similar libraries such as Prototype, MooTools and Dojo would also be able to do a similar job.
Hope that helps.
[EDIT]
Given the edit to your question, can you not just place the advertisment <script> tag inside the <div> on the page where you want it?
So with JQuery, you could write something like this to run your ad in each place you want it:
HTML:
....
<div class='execute'></div>
....
<div class='execute'></div>
....
Javascript code (remember to also include the JQuery library, or this won't work):
$(document).ready(function () {
$('.execute').each(function() {
advertisement(this); //change to whatever the advertisement script function is called.
});
});
Hopefully that will get you started. I can't really help you much more without knowing more about the advertisement script, though.
Also, the people who supplied the advert script should be able to tell you how to use it.
I believe a Javascript library like JQuery or Dojo is what you are looking for. It will allow you to add event handlers on tags with certain CSS attributes, which will behave exactly like what you are trying to do right now.
EDIT
Here is an example with Dojo pulled from the Google CDN that will popup an alert window when you click on any <div class="execute"></div> block:
<html>
<head>
<style>
<!--
.execute { background-color: red; height: 25px; }
-->
</style>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js" ></script> <!-- load Dojo from Google CDN
<!-- Let's register a onClick handle for any .execute div. -->
<script>
dojo.ready(function() // Dojo will run this after being initialized
{
// Get A list of all tags with id execute and add a event onClick
dojo.query(".execute").connect("onclick", function(evt)
{
alert("Event triggered!");
// ...
});
});
</script>
</head>
<body>
<div class="execute">Click me 1</div>
<br /><br />
<div class="execute">Click me 2</div>
</body>
</html>
Edit 2
This example uses an onClick event but Dojo (JQuery) allows you to do much more things. For instance if you wanted to dynamically add an image or something onLoad inside .execute divs, you could do it with Dojo (JQuery) in a similar way to this.
Doing it with a library saves you a lot of effort, but if you still want to write and call your own functions from javascript files, this is a rough idea of how you would do it:
// myScript.js
function foo()
{
// ...
}
// page.htm
<html>
<head>
<script src="path/to/myScript.js"></script>
</head>
<!-- ... -->
<div class="execute">
<script>
<!--
// Call foo()
foo();
-->
</script>
</div>
<!-- ... -->
It doesn't really make sense to abstract a script into CSS like that, and even if it was a good idea, it can't be done.
Why do you need to run the same script over and over in different places? Consider whether or not there might be a better or simpler way to do whatever it is you're doing.
Plus, when you include a script with the src attribute in the script tag, if you modify the script's source file, the changes persist everywhere.
No, but you can use script to alter the CSS properties of any element in the DOM.