How to navigate KendoUI page from code with transition? - javascript

I want to navigate from code to some place with slide:right transition for example.
app.navigate('#some_page')
That code use default page transition. How to change custom transition in code?

What about:
app.navigate(
'#some_page',
'slide:right' //or whichever transition you like
);
Cheers...
// edit: Changes object to parameters

Here is a piece of the documentation that you might be searching for.
http://docs.kendoui.com/getting-started/mobile/application/overview#reverse-transition

Related

how change a style of ngx datatable column on scroll?

I want a add a particular style to a frozenLeft ngx datatable column upon scroll. So far what I have achieved is triggering a function call on scroll and setting a flag to true to indicate that the style should be applied.
onScroll(event){
if(event.offsetX > 0){
this.flag=true;
}
}
But, in ng-datatable column [ngClass]="{'custom-style': flag}" is not working (class is not getting appended to the element).
Also tried [cellClass] I am not able to figure out how to use [cellClass]="getClass" to trigger the change whenever I scroll.
Your help is appreciated.
You can use condition in the ngClass and apply the class based on it:
<div [ngClass]="flag ? 'applyStyle' : 'noStyle'"> </div>
If this doesn't work, there might be an issue with view encapsulation. You need to remove it. You should check this thread, it explains how to do that in simple steps.
Also, make sure your change detection strategy is set to default or make change detection if it is OnPush which will update the view properties.

Changing page background via Javascript

I have been trying to get this to work for the past 6 hours and I am just unable to do it right. I've looked at the questions and solutions on SO as well to no avail. What am I doing horribly wrong?!?
All I have is a html5 page with no background. In my javascript code I call upon this method when the document is ready:
/*
* Initializes the landing page.
*/
function initializeLanding(){
$('body').css({
'backround':'url("http://40.media.tumblr.com/290e7a272b492735ddf8cd968e657d05/tumblr_nhmg6xYnv41u7ns0go1_1280.jpg")'
});
}
It should be something stupidly simple, and yet here I am. I've tried using single quotes, double quotes, without multiple attributes, etc. I would also much rather not use CSS or DOM properties to change the background, as I have set up way points along the page to change the background upon scrolling past them.
Also, if I call the .css() method and put in new attributes, will it overwrite all the old ones, or just the stated attributes in the latest css() call?
Update: here is where I call the function:
var main = function(){
$(".owl-carousel").owlCarousel();
lorem();
initializeLanding();
}
$(document).ready(main);
you have a spelling mistake.
backround => background.
check this demo
you have a spelling mistake. replace backround to background
function initializeLanding(){
$('body').css({
'background':'url("http://40.media.tumblr.com/290e7a272b492735ddf8cd968e657d05/tumblr_nhmg6xYnv41u7ns0go1_1280.jpg")'
});
}

Auto Swap External CSS Stylesheet with toggle scripting

Hi I am trying to get this script to toggle back to original CSS external stylesheet.
I have the following code that works.
$(document).ready(function() {
$("#css-master2").click(function() {
$("link[title=change]").attr({href : "css/master2.css"});
});
});
Whenever someone clicks on anything with id #css-master2 it changes the external style sheet to master2.css (that part works fine).
What I would like it do is change back to the original master1.css if they click on it again. Something like toggle?
Any help would be greatly appreciated.
Check for the link tag's href, if it equals master2, switch back to master1 like the same way above.
Can't think about why you'd do this, considering the exact thing can be done using css classes instead of two different files.

How to change a DIV or BODY with Javascript from a navigation menu?

a quick question... How do I change the body (in a DIV) of a webpage from a navigation link?
I have music playing in the background and need it to keep playing through the navigation menu. I'm not sure how to code it but I think a function may be the way to go?
Thanks!
You can use
document.getElementById("idOfYourDiv").innerHtml = "<div>foo</div>";
to edit the body of <div id='idOfYourDiv'></div> in pure JavaScript.
The event you want to probably trigger is onClick.
If you want to use jQuery then you can use
$('#navigButton').click(function(){
$('#idOfYourDiv').html("<div>foo</div>");
});
Edit: Good point by Andy Holmes - take a look at jQuery's load() function in the API.

Write a function inside jquery .html()

I am running a bg slider..."Supersized - Fullscreen Slideshow jQuery Plugin"
what i need is when a background changes some contents in a specific div must also change...
here i found a code line from script
if (options.slide_captions)
$('#slidecaption').html(options.slides[currentSlide].title);
this one pulls the image title to a specific div, but i want to load unique div for each background change...
or is there any other ways to do??
i have very little knowledge in jquery...
please help
advance thanks...
you can write this:
if (options.slide_captions) $('#slidecaption').html(options.slides[currentSlide].title, function(){
//write the code that load the unique div
});
tell me if it works
http://buildinternet.com/project/supersized/docs.html#theme-after
Check-out the theme.afterAnimation( ) documentation. You can set it to a function that changes the content after the slide changes.

Categories