Please help me in this problem.. why my j-flow slider does not working correctly.. I coy code by j-flow demo.. Please check my given link:
https://dl.dropboxusercontent.com/u/103234001/test/index.html
may be my document ready function have some problem. But I don't know,whats wrong with me..
$(document).ready(function(){
$("#myController").jFlow({
controller: ".jFlowControl", // must be class, use . sign
slideWrapper : "#jFlowSlider", // must be id, use # sign
slides: "#mySlides", // the div where all your sliding divs are nested in
selectedWrapper: "jFlowSelected", // just pure text, no sign
effect: "flow", //this is the slide effect (rewind or flow)
width: "940px", // this is the width for the content-slider
height: "300px", // this is the height for the content-slider
duration: 400, // time in milliseconds to transition one slide
pause: 5000, //time between transitions
prev: ".jFlowPrev", // must be class, use . sign
next: ".jFlowNext", // must be class, use . sign
auto: true
});
});
You're trying to load jquery from http on an https. jQuery is not getting loaded. Best solution is to use a local version of jquery and refer to it like the rest of your scripts. otherwise you can include jquery like google libraries specifies...
<script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.0/jquery.mobile.min.js"></script>
note the lack of http or https
using your browsers debugging tools makes issues like this easy to spot.
Related
i've made this banner like screen that appears when my site is loaded, but here's the thing, i don't want no scrollbar while this opening animation it's happening, i only want to show the other components (the scrollbar and the whole site) once the gsap animation finishes, how could i proceed? thanks! (i tried to create a function to control those global elements, is it a way?)
So if I understand correctly you need the Banner to be displayed until the site is loaded. Maybe you are making some API calls or in general, you are planning to show the banner for let's say 3 sec and post that you want your actual components to be displayed.
You can try below approch:
export const APP = (): JSX.Element => {
const [isAnimationInProgress, SetAnimationState] = React.useState(true);
React.useEffect(() => {
// You can have your page load API calls done here
// Or wait for 'X' seconds
// Post that set the AnimationState to false to render actual components
setAnimationState(false);
})
return (
{
isAnimationInProgress && <Banner />
}
{
!isAnimationInProgress && <ActualComponent />
}
)
}
Regarding scrollbars, including overflow: hidden; in style for the banner should do the work if you are getting scrollbars for the Banner component.
I am trying to create a loading spinner to put at the bottom of a div like this jsfiddle so its always at the bottom when my returned code is appended to its sibling above its child element. Then when I scroll to the bottom of the page my endless scroll script runs and changes display from none to block of the spinner and once the next set of results is appended the spinner is hidden again.
The problem is is that once the scrollbar hits the bottom of the page the spinner triggers the get request twice for some reason and my results are doubled upon being appended. This happens only when the spinner div is inside the container element. My code runs fine with the spinner there appending the results once. Even using position:relative; on the container and absolute on the spinner div and setting bottom:0px; causes two get requests.
No matter how I create the spinners with CSS they all do the same thing multiple get requests. I have had to place the spinner in a div with overflow:hidden; also to prevent the jumping behavior of the scrollbar which causes continuous get requests when my code triggers.
Am I going the right way about this or is my logic flawed or what is wrong here?
EDIT js code that triggers the get request
$(document).ready(function() {
if ($('.pagination').length) {
$('#id2').scroll(function() {
var currentuserfeed = $('#currentuserfeed .pagination .next_page').attr('href');
if (currentusershow && $('#id2')[0].scrollHeight > 820 && $('#id2').scrollTop () >= $('#id2')[0].scrollHeight - $('#id2').height ()) {
return $.ajax({
type: 'GET',
url: currentusershow,
data: { currentusershow: 'user' },
dataType: 'script',
});
};
});
return $('#id2').scroll();
};
};
so in the back of the 'discover meteor' book they explain how to do page transitions. i've got it working, however it causes problems with the loading of javascript functions and variables on other pages that its animating into. it seems they're not ready or simply don't exist at the time the page is routed.
Template.layout.onRendered(function() {
this.find('.pos-rel')._uihooks = {
insertElement: function(node, next) {
$(node).hide().insertBefore(next)
.delay(200)
.velocity("transition.slideUpIn", 1000)
},
removeElement: function(node) {
$(node).velocity({
opacity: 0,
},
{
duration: 100,
complete: function() {
$(this).remove();
}
});
}
}
});
if i remove the above code then all my javascript variables and functions work correctly. does anyone have another working solution to page transitions using velocity.js ? i did find this one but its a year old and i couldn't get it to work at all, it just makes the content where '{> yield}' is go blank :(
Just a note for asking questions on stack overflow: "causes problems with the loading of javascript functions and variables" is pretty vague. Its best to give more specifics.
But anyways, you said here that you're using isotope to render items in a grid. I'm assuming you're calling $elements.isotope() within a Template[name].onRendered callback.
This is probably the issue because its trying to compute and rearrange into a grid the elements while they're hidden. Using display: none actually removed the elements, thus isotope can't compute the sizes, etc. for the layout. Try this:
insertElement: function(node, next) {
$(node).css("opacity", 0).insertBefore(next)
.delay(200)
.velocity("transition.slideUpIn", {duration:1000, display:null})
},
opacity: 0 should do what you're looking for. It will make them transparent without removing them from the transition.slideUpIn should animate opacity so you're good there.
Also, velocity transitions mess with the display property. Setting display: null in the animation options prevents it from setting the display to block or whatever it wants to do. This may or may not be necessary, but I pretty much always use it.
You could use:
onAfterAction
onBeforeAction
. The solution should be something like this:
animateContentOut = function() {
$('#content').css('display', 'none');
this.next();
}
fadeContentIn = function() {
$('#content').velocity('transition.fadeIn',1000);
}
Router.onBeforeAction(animateContentOut)
Router.onAfterAction(fadeContentIn)
I've installed the codemirror editor succesfully.
But there is one issue regarding css of that editor.
You can check here what I mean.
So how can I display the color after 3rd line in the editor.
you should look at
<div class="CodeMirror-gutters" style=" /*height: some_pixel*/; "><div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 28px;"></div></div>
instead of some_pixel after press enter or any keyword it will automatically set the height of the line number,
if you have that problem on start you might want to see how to create at first,
there is three common method,
The simplest is to define your Text Area and just use this code:
var YourCodeMirror = CodeMirror.fromTextArea(YourDefinedTextArea);
The best is put values using code:
var yourCodeMirror = CodeMirror(PlaceYouWant, {
value: /*any code here :*/"function(){return 'anything'}",
mode: /*your mode ie.*/"javascript"
});
hope it helps
UPDATE: There is a manual site here : http://codemirror.net/doc/manual.html
CodeMirror parses HTML using the XML mode. To use it, the appropriate script must be included, same as with any other mode.
Add its dependency in your markup:
<script type="text/javascript"
src="/site.com/js/libs/codemirror/mode/xml/xml.js"></script>
and set the mode to xml:
config = {
mode : "xml",
// ...
};
In addition, you may want to configure the parser to allow for non well-formed XML. You can do so by switching the htmlMode flag on:
config = {
mode : "xml",
htmlMode: true,
// ...
};
jQuery UI themes are nice they apply to the entire document, however I have some cases where the style of the dialog such as the title bar colour must be changed.
In my jQuery UI css, the titlebar is coded:
.ui-dialog .ui-dialog-titlebar { padding: .4em 1em; position: relative; }
Here's my javascript:
var $AlertDialog = $('<div"></div>')
.dialog({
autoOpen: false,
title: 'Alert Message',
buttons: {Ok: function() {$( this ).dialog( "close" );}}
});
function Alerter(cTxt)
{
$AlertDialog.html(cTxt);
$AlertDialog.css('ui-dialog-titlebar','color: red');
$AlertDialog.dialog('open');
};
Alerter() is then called as a substitute for alert().
Accessing and altering the color property of 'ui-dialog-titlebar' has no effect.
Lots of reading preceded this question. Seems others have had similar issues, but not specific to jQuery UI.
How can this be done?
Update:
Thanks to a good hint, I did this:
$AlertDialog.dialog('open');
$("#.ui-dialog .ui-dialog-title").css('color','red');
$("#.ui-dialog .ui-dialog-title").css('background-color','orange');
Works. But acceptable practice?
My suggestion would be to not use the .ui-dialog selector as there may be more than one dialog on a page. You can traverse to the title bar.
...
$AlertDialog.html(cTxt);
// might as well use the theme since its part of jquery ui
$AlertDialog.prev().addClass("ui-state-error");
$AlertDialog.dialog('open');
Firstly,
According to documentation .css() takes property as param.
It seems you are trying changing ui-dialog-titlebar. Instead try this:
...
function Alerter(cTxt)
{
$AlertDialog.html(cTxt);
$AlertDialog.dialog('open');
$(".ui-dialog .ui-dialog-title").css('color','red');
$(".ui-dialog .ui-dialog-title").css('background-color','orange');
//Assuming you want to change header color only
//see the theming structure at http://jqueryui.com/demos/dialog/#theming
};