I have a script that loads html content to a div and applies jquery tabs at the same time. However, I want to get JQuery Selectmenu on my select at the same time.
I'm having trouble figuring out how to nest these.
I'll be continuing looking at the API Docs, and tutorials, stackoverflow etc.
BUT, In the meantime, I thought someone could help expedite the process.
This is my script as is:
$(function() {
var work = $( "#display" );
$( "#selector" ).change(function( event ) {
work.load($(this).val(),function(){
$("#textdisplay").tabs();
});
});
});
This script works just like i want it to, but It doesn't get styled with my theme because it's not a selectmenu
I want my select to use selectmenu:
$(function() {
$( "#selector" ).selectmenu();
});
Attempt 1:
$(function() {
var work = $( "#display" );
$( "#selector" ).selectmenu(
$( "#selector" ).change(function( event, ui ) {
work.load($(this).val(),function(){
$("#textdisplay").tabs();
);
});
});
});
Attempt 2:
$(function() {
var work = $( "#display" );
$( "#selector" ).selectmenu({
change: function( event ) {
work.load($(this).val(),function(){
$("#textdisplay").tabs();
});
});
});
});
Attempt 3:
$(function() {
var work = $( "#display" );
$( "#selector" ).selectmenu({
change: function( event, ui ) {
work.load($(this).val(),function(){
$("#textdisplay").tabs();
});
});
});
});
Attempt 4:
This attempt loads the selectmenu theme, but kills functionality
$(function() {
$( "#selector" ).selectmenu();
});
$(function() {
var work = $( "#display" );
$( "#selector" ).change(function( event ) {
work.load($(this).val(),function(){
$("#textdisplay").tabs();
});
});
});
Attempt 5:
$(function() {
var work = $( "#display" );
$( "#selector" ).selectmenu ({
selectmenuchange: function( event, ui ) {
work.load($(this).val(),function(){
$("#textdisplay").tabs();
});
}
});
});
So, i went back to the Jquery Documentation and found the correct syntax to make this work. I also learned a little more about how to use the console tab in developer tools view to track down syntax errors.
$(function() {
var work = $( "#display" );
$( "#selector" ).selectmenu ({
change: function( event, data ){
work.load($(this).val(),function(){
$("#textdisplay").tabs();
});
}
});
});
Related
I trying to get a trigger working but this doesn't seem to work. Im 100% sure this is the right code to do the job.
$(document).ready(function() {
$( ".relrightbutton" ).click(function() {
$( ".attachment-large" ).trigger( "click" );
});
});
however is there another way to trigger an element click when a different element is clicked?
I don't see flaws in that code. It might be something else then (classnames are correct?)
You could try getting the click on another thread:
$(document).ready(function() {
$( ".relrightbutton" ).click(function() {
setTimeout(function(){
$( ".attachment-large" ).trigger( "click" );
}, 10);
});
});
Or try another click method trigger:
$(document).ready(function() {
$( ".relrightbutton" ).click(function() {
$( ".attachment-large" ).click();
});
});
Is there no error message provided in your console?
I want to know how to change jquery mobile default Page Transition to slide ?
i tried
$("div[data-role=page]").bind("pagebeforeshow", function ( e , data ) {
console.log("++++++++++++++++++++++++++++++++++++ page before show");
$.mobile.silentScroll(0);
$.mobile.changePage.defaults.transition='slide';
});
and
$( document ).on( "mobileinit", function() {
//apply overrides here
$("div[data-role=page]").pagecontainer( "change" , { transition: "slide" } );
});
But both did not work
Solution :
Okay found the answer this mobileinit need to call before jq mobile load
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$( document ).on( "mobileinit", function() {
alert("yes");
console.log("mobile initialize .....");
$.extend( $.mobile , {
defaultPageTransition: 'slide'
});
});
</script>
<script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
Like this:
$( document ).on( "mobileinit", function() {
$.extend( $.mobile , {
defaultPageTransition: 'slide'
});
});
Or this:
$(document).bind('mobileinit', function() {
$.mobile.defaultPageTransition = "slide";
});
So, I have this function in jQuery:
$(function(){
$( ".unfocused" ).click(function ClickHeader () {
$( this ).addClass( "focused" );
$( this ).removeClass( "unfocused" );
$(".header").not(this).addClass( "unfocused" );
$(".header").not(this).removeClass( "focused" );
});
});
It works perfectly when a header is clicked the first time, but when I try to click another unfocused header, the function doesn't work anymore. Is it because it runs on document .ready?
Thanks for your help!
Change it like this:
$( document ).on("click", ".unfocused", function() {
$( this ).addClass( "focused" );
$( this ).removeClass( "unfocused" );
$(".header").not(this).addClass( "unfocused" );
$(".header").not(this).removeClass( "focused" );
});
This basically registers the event on the document. When you click a header, the event bubbles up to the document. There, the given selector is validated and the function is executed if needed.
Here is a jsfiddle using the delegate operation for handling the event like you need.
http://jsfiddle.net/MN9Zt/2/
$("body").delegate(".unfocused", "click", function() {
$(this).addClass("focused");
$(this).removeClass("unfocused");
$(".header").not(this).addClass("unfocused");
$(".header").not(this).removeClass("focused");
});
Is it possible to enable ckeditor by class type?
For example, I tried the following code but getting error:
$(document).ready(function() {
var txtArea= $(".ckeditor");
CKEDITOR.replace(txtArea,{ });
});
CKEDITOR.replace accepts ids and native element instances. But you're trying to pass jQuery object to it - it cannot work.
You should try this way:
$( document ).ready( function() {
$( '.ckeditor' ).each( function() {
CKEDITOR.replace( this );
} );
} );
Or, if you know that there's just one textarea to be replaced:
$( document ).ready( function() {
CKEDITOR.replace( $( '.ckeditor' )[ 0 ] );
} );
See this example on JSFiddle.
I am trying to develop a simple drag and drop 'game'. In simple terms all you do is drag and drop various items into a area and it will say correct or wrong depending on the item dragged. This is what I have so far and its not working at all and I dont know why. My knowledge of JS and jQuery leaves a lot to be desired too.
<script>
$(function() {
$( "#draggable" ).draggable();
$( "#wrong" ).draggable();
$( "#droppable" ).droppable({
drop: function( event, ui ) {
var currentId = $(this).attr('id');
if (currentId == "draggable") {
$( this )
.addClass( "highlight" )
.find( "p" )
.html( "Correct! :)" );
} else {
$( this )
.find( "p" )
.html( "Wrong! :(" );
}
}
});
});
</script>
Now that I have it working I need more instances of the draggable images but when I add more the the new ones that have been added don't work.
http://jsfiddle.net/KcruJ/9/
var currentId = $(this).attr('id');
if (currentId == "draggable")
...
Will never result true, as $(this) represents the droppable the draggable is dropped on. ui.draggable represents the draggable[1]
Try:
var currentId = $(ui.draggable).attr('id');
if (currentId == "draggable")
...
This works: http://jsfiddle.net/T6nu3/2/
$(this).attr('id');
Will always return droppable.
You need to access the dragged element:
$(ui.draggable).attr('id');
Take a look at the jQuery UI Documentation for more information.
Code:
$(function() {
$("#draggable").draggable();
$("#wrong").draggable();
$("#droppable").droppable({
drop: function(event, ui) {
var currentId = $(ui.draggable).attr('id');
if (currentId == "draggable") {
$(this).addClass("highlight").find("p").html("Correct! :)");
} else {
$(this).find("p").html("Wrong! :(");
}
}
});
});
haha well, Alex seems to have this one on lock.
There's the answer: http://jsfiddle.net/aGqHh/1/