I have a short question to JQuery mobile
I Have the following script and want to have a data transition=slide but it is not working with window.location.href. So i want to change it to $.mobile.changePage. But I don't get it.
Here is the script;
var category_data;
$(document).ready(function () {
$('#search_category_form').bind('submit', function(){
var form = $('#search_category_form');
var data = form.serialize();
$.post('index.html', data, function(){
category_data = data;
window.location.href = 'index.html#search_general';
});
return false;
});
Thank you for your help
$.mobile.changePage() is now deprecated, however you can change your code to:
// [deprecated] $.mobile.changePage("index.html#search_general", {transition: "slide"});
$.mobile.pageContainer.pagecontainer("change", "index.html#search_general", {transition: "slide"});
Related
I am trying to change page with jQuery but I do not know how to access the "selected" variable.
Here is what I am trying do achieve with jQuery:
var tabs = document.querySelector('paper-tabs');
var pages = document.querySelector('core-animated-pages');
tabs.addEventListener('core-select', function(){
pages.selected = tabs.selected;
});
And I have tried something like this:
$(document).ready(function(){
$('paper-tabs').on('core-select', function(){
$('core-animated-pages').attr('selected',$(this).attr('selected'));
});
});
So how do I get pages.selected and tabs.selected with jQuery?
EDIT:
This worked for me, but I don't believe it is the optimal answer
$(document).ready(function(){
$('paper-tabs').on('core-select', function(){
$('core-animated-pages').find('section').removeClass('core-selected');
$('core-animated-pages').find('section:eq('+($(this).find('.core-selected').index())+')').addClass('core-selected');
});
});
I guess a hybrid will do..
$(document).on('core-select','paper-tabs', function(){
document.querySelector('core-animated-pages').selected = this.selected;
});
i am new to jQuery and i'm having a little problem i cant solve.
i tried to find a solution on google but with no success.
i want to insert value to textarea as a variable.
its inserting "facebook", instead of "hhhh".
$(".button").click(function () {
var facebook = "hhhh";
$('#htmlcode').val($(this).attr('id'));
return false;
});
jsfiddle:
http://jsfiddle.net/nv9xmzoq/4/
edit:
i have two buttons and i want to change the value according to their id
Just pass facebook variable to .val method, like this
$(".button").click(function () {
var facebook = "hhhh";
$('#htmlcode').val(facebook);
return false;
});
Example
If you need set id also, you can do like this,
$(".button").click(function () {
var facebook = "hhhh";
$(this).attr('id', facebook);
$('#htmlcode').val(facebook);
return false;
});
Example
Update
$(".button").click(function () {
var data = {
facebook: "hhhh",
twitter: "aaaa"
};
$('#htmlcode').val(data[$(this).attr('id')]);
return false;
});
Example
use to insert content
$('#htmlcode').val("something");
use to add atribute. ex:
$('#htmlcode').attr("disabled","disabled");
use to add or modify css
$('#htmlcode').css("width","500px");
Please help me with binding bxSlider on Ajax response, tried on. , tries function after but no help (think problem with lack of JS syntax knowledge).
Here's JS:
$('.catalog-menu-links a').click(function(event) {
event.preventDefault();
// Set class to newly selected language button
$('.catalog-menu-links li.current-menu-item').removeClass('current-menu-item');
$(this).parent().addClass('current-menu-item');
// Get new language data URL
var href = $(this).attr("href");
$.get(href, function(data) {
var ajaxCatalogSliderContent = $(data).find('.catalog-slider').html();
$('.catalog-slider').fadeOut('slow', function(){
$('.catalog-slider').html(ajaxCatalogSliderContent);
}).fadeIn();
//alert($('.catalog-slider').html());
$('body .bxslider-catalog').bxSlider({pager: true,controls: true,mode: 'fade'});
});
});
I tried this:
function startCatalogSlider() {
$('.bxslider-catalog').bxSlider({pager: true,controls: true,mode: 'fade'});}
startCatalogSlider();
$('.catalog-menu-links a').click(function(event) {
event.preventDefault();
// Set class to newly selected language button
$('.catalog-menu-links li.current-menu-item').removeClass('current-menu-item');
$(this).parent().addClass('current-menu-item');
// Get new language data URL
var href = $(this).attr("href");
$.get(href, function(data) {
var ajaxCatalogSliderContent = $(data).find('.catalog-slider').html();
$('.catalog-slider').fadeOut('slow', function(){
$('.catalog-slider').html(ajaxCatalogSliderContent);
}).fadeIn();
//alert($('.catalog-slider').html());
startCatalogSlider();
});
});
But with no successful result
How to create if I have in my url:
mysite.com/#newgoal, my modalbox is displayed?
Currently is displayed if I click button with id="newGoalButton".
I need both options at once.
HTML:
New Goal
JS:
$(document).ready(function(){
$('#newGoalButton').click(function() {
$(".fullWhite").fadeIn(100);
$(".modal").fadeIn(200);
});
$('.modal .iks').click(function() {
$(".fullWhite").fadeOut(200);
$(".modal").fadeOut(100);
});
});
You could use:
<script>
$(document).ready(function(){
var url = window.location.href;
if (url.indexOf("#newgoal") != -1){
// display modalbox
}
});
</script>
You can use jQuery hashchange plugin :
$(window).hashchange(function() {
if (location.hash === '#newgoal') {
$(".fullWhite").fadeIn(100);
$(".modal").fadeIn(200);
}
});
And I think you will not need $('#newGoalButton').click if you use this:
I'm trying to learn jQuery by implementing a simple menu. I've got <div> elements that act as buttons and have links in them. I'm trying to add onclick events to the divs that navigate the browser to the link's address in the div. This is basically my pseudo-code. What would the real code be? How can I improve this? Any feedback appreciated!
// Iterate over each menu button
$('.masterHeaderMenuButton').each(function () {
// Get the link in each button and set the button's onclick to
// redirect to the link's address
var url = $('a', this).attr('href');
this.click(function () {
window.location.href = url;
});
// If the user is on the page for the current button, hilight it
if (window.location.href === url) {
$('a', this).addClass("masterHeaderMenuButtonSelected");
}
});
Try this untested example:
$('.masterHeaderMenuButton a').each(function () {
// Get the link in each button and set the button's onclick to
// redirect to the link's address
var _this = this; // save this ref for click handler.
$( this ).parent().click(function () {
window.location.href = $(_this).attr('href');
});
// If the user is on the page for the current button, highlight it
if (window.location.href === url) {
$(this).addClass("masterHeaderMenuButtonSelected");
}
});
I don't actually use jQuery for such a simplistic task, especially if it involves page redirection. So unless you're looking to do some AJAX-style page loading, stick with standard HTML.
For that task, I use this sweet combo:
$('#nav_links li').live('click', function() {
var ajax_link = $(this).attr('rel');
loadLink(ajax_link);
});
function loadLink(link){
$('#content_window').css('position','relative');
$('#content_window').animate({
'left': '20px',
'opacity': '0'
}, 500, "swing", function() {
$.ajax({
url: '../sections/' + link,
dataType: 'html',
success: function(html) {
$('#content_window').html(html);
}
});
});
}
Awesome, right?
Here's the HTML:
<ul id="nav_links">
<li rel="setting-up.html"><span class="green">|</span>setting up<br></li>
<li rel="features.html"><span class="purple">|</span>features<br></li>
<li rel="more-uses.html"><span class="blue">|</span>more uses<br></li>
<li rel="troubleshooting.html"><span class="yellow">|</span>troubleshooting</li>
</ul>
Have a fun.