I have a script that slides a div down from behind the menu, when people click on the tab. However its in jquery and I want to use mootools (lots of reasons I wont go into here). However im stuck with mootools 1.1 at present. But for some reason my attempt is not working :(
The html
print("code sample");
<div id="panel">
<form action="">
< form here >
</form>
</div>
<div class="slide">
<p class="sl"><span></span></p>
Div id panel holds the form which slides down, div class slide and the P tag is replaced by a tab/button which hangs down via css, clicking on this slides the tab down.
The jquery (which works fine)
print("code sample");
<script type="text/javascript">
$j(document).ready(function(){
$j(".btn-slide").click(function(){
$j("#panel").slideToggle("slow");
$j(this).toggleClass("active"); return false;
});
});
</script>
My moo attempt
print("code sample");
<script type="text/javascript">
window.addEvent('domready', function(){
var mySlide = new Fx.Slide('panel');
$('toggle').addEvent('click', function(e){
e = new Event(e);
mySlide.toggle();
e.stop();
});
});
</script>
Like I said above I am restricted to moo 1.1 at present, but if there is a answer that will work with both 1.1 and 1.2 or if its a similar change I would be grateful to hear, as it will be updated at some point.
Will this work?
function toggleSlide(){
var theSlider = new Fx.Slide('slide');
$('theSlide').addEvent('click', function(e){
e = new Event(e);
theSlider.toggle();
e.stop();
});
}
This should work both in 1.11 and 1.2:
window.addEvent('domready', function() {
var mySlide = new Fx.Slide('panel');
$('toggle').addEvent('click', function(e) {
e = new Event(e); // this isn't needed in 1.2
e.stop();
mySlide.toggle();
this.toggleClass('active');
});
});
However, in MooTools 1.2 and later, Fx.Slide isn't included in the core – you'll have to download it as a part of MooTools More.
A working demo: http://jsbin.com/ewasa
Related
im trying to get the images to be placed in side the div so h/w can be controlled and i can seem to get it to work with jquery 3.2.1 it only works with jquery 2.1.1, is there an better way of write this code, i was trying to have a simple click "next" div and change image with loop.
$(function() {
var images = [
"http://placehold.it/300x150/f0f&text=1"
,"http://placehold.it/300x150/cf5&text=2"
,"http://placehold.it/300x150/b15&text=3"
,"http://placehold.it/300x150/c59&text=4"
,"http://placehold.it/300x150/ac2&text=5"
,"http://placehold.it/300x150/bb5&text=6"
];
// ======================================
var tot = images.length;
var c = 0; // current image
function loadImage(){
$("<img/>").attr("src",images[c]).load(function() {
$('#gallery').html( this );
});
}
loadImage(); // for the page load
$('#prev').click(function(){
id=this; c--;
c=c==-1?tot-1:c%tot;
loadImage();
});
$('#next').click(function(){
id=this; c++;
c=c==-1?tot-1:c%tot;
loadImage();
});
});
#gallery{
width:150px;
height:50px;
background:#ddd;
margin-top:8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pagination">
<div id="prev" class="btn" style="position:">PREV</div>
<div id="next" class="btn" style="position:">NEXT</div>
</div>
<div id="gallery">
</div>
The use of load() as an event binding was removed in 3.X. It is now only for fetching resources, with the first parameter being the url of the resource to retrieve.
http://api.jquery.com/load/
"Note: Prior to jQuery 3.0, the event handling suite also had a method named .load(). Older versions of jQuery determined which method to fire based on the set of arguments passed to it."
Use on('load') instead.
Substitute
$("<img/>").attr("src",images[c]).on("load", function() {
$('#gallery').html( this );
});
for
$("<img/>").attr("src",images[c]).load(function() {
$('#gallery').html( this );
});
I am using this plugin https://danielupshaw.com/jquery-star-rating/
I want to reset my form. But how can I reset these stars??
$("#btn-reset").on('click', function() {
//some other inputs reset
$('#starrating').star_rating.remove();
$('#starrating').star_rating.reload();
}
Please help on how to reset these stars to zero or null.
Here is the full code.
$("#btn-reset").on('click', function() {
$('#starrating').star_rating.reload();
});
jQuery(function($) {
$('#starrating').star_rating({
click: function(clicked_rating, event) {
event.preventDefault();
$('input[name=\'rating\']').val(clicked_rating);
this.rating(clicked_rating);
}
});
});
I don't know if this is the best approach, since I'm not familiar with this library...
But I achieved a reset like this:
$(document).ready(function(){
$('.rating').star_rating();
$("#resetStars").on("click",function(){
$(".rating").remove();
$('.star-rating').replaceWith("<span class='rating'>0/10 stars</span>");
$(".rating").text("0/10").star_rating();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://danielupshaw.com/jquery-star-rating/jquery.star-rating.js"></script>
<h1>This is a good script!</h1>
<span class="rating">9.5/10 stars</span><br>
<br>
<br>
<button id="resetStars">Reset stars</button>
I'm not familiar with the plugin, but looking at the link you provided, can't you just update the text inside of the element to reflect an empty or zero rating? Something like:
$("#btn-reset").on('click', function() {
$('#starrating').text('0/5').star_rating();
}
It looks like all you need to do is set the content to 0. Then re initialize the method.
$("#starrating").html("0");
$("#starrating").star_rating();
You could try something like this; an attempt to set default blank stars on initial page load, or Click.
$(document).ready(function() {
$('i').addClass('fa-star-o');
});
Then refresh page to rest:
$( ".reset" ).click(function() {
location.reload();
});
If you don't want to refresh page, you could try:
$( ".reset" ).click(function() {
$('i').addClass('fa-star-o');
});
You may have to re-initiate your click feature on the star with similar jQuery to re add the appropriate Class when needed.
If this doesn't help or work; could you create a https://jsfiddle.net/ to fully replicate your issue; and then we could solve it. If it were me; I'd find a better plugin to use or just write it from scratch at that point.
A bit another approach by re-rendering your rating stars from scratch using custom renderRating function.
HTML:
<div class="rating-stars"></div>
<button class="reset-rating">Reset rating</button>
JS:
var defaultRating = "0/5";
renderRating("3/5");
function renderRating(rating) {
var ratingEl = $('<span />').addClass('rating');
var ratingStr = rating || defaultRating;
ratingEl.text(ratingStr);
$('.rating-stars').html(ratingEl);
ratingEl.star_rating();
}
$('.reset-rating').on('click', function() {
renderRating();
})
Preview on JSFiddle
This should reset it to 0:
$('#starrating').star_rating('rating', 0);
Here's the format to call the public methods:
$('#starrating').star_rating('method_name');
Should your click event be inside the document ready? If it is outside document ready, that can sometimes cause issue. I hope this helps :)
I've got this code
$(".test_init").click( function(){
var win = $(this).next(".test_wrap").find(".test_drop");
if ($(win).html().length)
$(win).empty().hide("fast");
else {
$(win).load("URL");
}
});
Which returns me some html form without close button
I wish to add close button using such method without adding it in every-single function
$('*[class*="_drop"]').change(function() {
$(this).append($('<a />', {
class: 'close-drop',
click: function(e) {
e.preventDefault();
alert("test");
}})
);
});
But nothing happens - i can't understand why close button doesn't appends
<div class="test_wrap relative">
<div class="test_drop absolute"></div>
</div>
Example: http://jsfiddle.net/fppfyey7/10/
Your problem is with your CSS, not with your JS. The button is appended but you are hidding it with your style.
For example in this fiddle I append a button with your JS code and your CSS:
Fiddle 1
Now, in this one, I just remove your absolute and relative classes:
Fiddle 2
My solution (isn't good enough, still works)
$('*[class*="_drop"]').ajaxStop(function() {
$(this).prepend('<a onclick="$(this).parent().empty().hide(\'fast\');" class="close-drop"></a>');
});
If here will be better solution, will mark it as answear!
I'm creating a website and on one page of the site (it's .php) I have two links. The first reads register and the next reads login. I am using jquery to create a popup and which form pops up depend on the link clicked. (I am trying to do this but not able to). I have 2 files in total (logReg.php) and (popup.css).
When I click on login the login form pops up as expected, but when i click on register nothing pops up. And if I reverse these that if I put the jquery code for register first then... the register box pops up but the login doesn't. I have read the click() function's jquery API but it seems to me i'm doing everything right but obviously not. Any help would be greatly appreciated. BTW This code is not 100% mine I modified the code that I found for a single popup window.
Content of logReg.php
<html>
<head>
<!-- Typical stuff here. link to the popup.css & jquery.js -->
<title>MyPage</title>
<script type="text/javascript">
$(document).ready(function () {
$("a.login-window").click(function () {
//Getting the variable's value from a link
var loginBox = $(this).attr("href");
//fade in the popup
$(loginBox).fadeIn(300);
//set the center alignment padding
var popMargTop = ($(loginBox).height() + 24) / 2;
var popMargLeft = ($(loginBox).width() + 24) / 2;
$(loginBox).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
//Add the mask to body
$('body').append('<div id="mask"></div>');
$('mask').fadeIn(300);
return false;
});
//When clicking on the button close the pop closed
$('a.close, #mask').live('click', function() {
$('#mask, .login-popup').fadeOut(300, function() {
$('#mask').remove();
});
return false;
});
$("a.register-window").click(function () {
//Getting the variable's value from a link
var registerBox = $(this).attr("href");
//fade in the popup
$(registerBox).fadeIn(300);
//set the center alignment padding
var popMargTop = ($(registerBox).height() + 24) / 2;
var popMargLeft = ($(registerBox).width() + 24) / 2;
$(registerBox).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
//Add the mask to body
$('body').append('<div id="mask"></div>');
$('mask').fadeIn(300);
return false;
});
//When clicking on the button close the pop closed
$('a.close, #mask').live('click', function() {
$('#mask, .register-popup').fadeOut(300, function() {
$('#mask').remove();
});
return false;
});
});
</script>
</head>
<body>
<div id="links>
Login
Register
</div>
<div id="login-box" class="login-popup">
<form method="post" class="signin" action="">
<!-- All form stuff here -->
</form>
</div>
<div id="#register-box" class="register-popup">
<form method="post" class="signin" action="">
<!-- All form stuff here -->
</form>
</div>
</body>
</html>
first don't use .live, upgrade jquery and use
$(document.body).on({event:function(){},...},"selector"
second don't use append, use
$('<div../>').appendTo($(document.body));
(i believe your bug comes from second)
also you could make a plugin of your open box code, then you bind the two at once using.on
For starters you are missing a double quote on this line:
<div id="links>
change to
<div id="links">
That should get your links fixed.
Then you should do what mikakun said about upgrading jquery and using .on as it is best to stay current.
I have this tabs that are working perfect in any browser apart from IE 9. Have been trying to solve this problem for days now, and I think I'm going completely mad.
<div class="product-collateral">
<div class="tab"><h3 class="product_tabs_additional">Additional Information</h3></div>
<div class="product-tabs-content" id="product_tabs_additional_contents">
Additional Information Content
</div>
<div class="tab"><h3 class="product_tabs_agenda">Agenda</h3></div>
<div class="product-tabs-content" id="product_tabs_agenda_contents">
Agenda Content
</div>
<div class="tab"><h3 class="product_tabs_terms">Terms and Conditions</h3></div>
<div class="product-tabs-content" id="product_tabs_terms_contents">
Terms and Conditions Content
</div>
<div class="tab"><h3 class="product_tabs_locations">Locations</h3></div>
<div class="product-tabs-content" id="product_tabs_locations_contents">
Locations Content
</div></div>
<script type = "text/javascript" > $jQ = jQuery.noConflict();
$jQ('.product-collateral .tab h3').wrapAll('<ul class="product-tabs"></ul>').wrap('<li></li>');
$jQ('.product-collateral .product-tabs li').each(function(index) {
$jQ(this).attr('id', $jQ(this).find('h3').attr('class'));
if (index === 0) {
$jQ(this).addClass('active');
}
});
//<![CDATA[
Varien.Tabs = Class.create();
Varien.Tabs.prototype = {
initialize: function(selector) {
var self = this;
$$(selector + ' h3').each(this.initTab.bind(this));
},
initTab: function(el) {
el.href = 'javascript:void(0)';
if ($(el.parentNode).hasClassName('active')) {
this.showContent(el);
}
el.observe('click', this.showContent.bind(this, el));
},
showContent: function(a) {
var li = $(a.parentNode),
ul = $(li.parentNode);
ul.select('li', 'ol').each(function(el) {
var contents = $(el.id + '_contents');
if (el == li) {
el.addClassName('active');
contents.show();
} else {
el.removeClassName('active');
contents.hide();
}
});
}
}
new Varien.Tabs('.product-tabs');
//]]>
< /script>
I know that one of the lines $$(selector + ' h3').each(this.initTab.bind(this)); there is a 2x$ but without it script stops working.
Im not a JavaScript specialist at all, hence my problem. Strangest for me is that this script is running in IE7 and 8 mode without any trouble. Only IE9 is breaking.
Any help much appreciated.
Thank you in advance
Dom
Please Check you code, and avoid declaring multiple versions of jQuery on the page. I think its the problem of jQuery conflict.
Looking at your page, you are using an old version of prototype (1.6.0.3), which was released in 2008 which is pre-IE9. In this version when you run the line: ul.select('li', 'ol') it's returning the empty list instead of the 4 element list you expect.
Quick fix: try changing the line to: ul.select('li'), which should select all the elements you want here.
Better fix: Upgrade to the latest version of prototype (1.7).