I want to fade my header in when the scrolltop is at the div called:
<div id="wieZijnWij" style="position:absolute; margin-top: -80px;z-index: 999"></div>
Now i found this code:
$(window).bind("scroll", function() {
if ($(this).scrollTop() > 768) {
$(".introHeader").fadeIn();
} else {
$(".introHeader").stop().fadeOut();
}
});
And it work, but it works when the scrolltop is at 768 px.
Can I code it so, that it only fades in when the scrolltop is at a specific div?
$(document).ready(function(){
a=$(".div").position();
});
$(window).bind("scroll", function() {
if ($(this).scrollTop() > a.top ) {
$(".div").fadeIn();
} else {
$(".div").stop().fadeOut();
}
Fixed it!
Related
Anyone know how to change the text on a checkbox and have the size of the checkbox scale appropriately?
http://jsfiddle.net/bobbyrne01/szwz2L2m/
html ..
<input id="audioCheckbox" type="checkbox" />
<label id="audioCheckboxText" for="audioCheckbox">Enabled</label>
js ..
$(function () {
$("input:checkbox").button();
$("#audioCheckbox").click(function (e) {
if (this.checked) {
$("#audioCheckboxText").text('Enabled');
} else {
$("#audioCheckboxText").text('Disabled');
}
});
});
Change the .html() of the label, not the .text():
$(function () {
$("input:checkbox").button();
$("#audioCheckbox").click(function (e) {
if (this.checked) {
$("#audioCheckboxText").html('<span class="ui-button-text">Enabled</span>');
} else {
$("#audioCheckboxText").html('<span class="ui-button-text">Disabled</span>');
}
});
});
jsFiddle example
When I drag an image on iPad with jQuery-ui Draggable, I get a small portion of the dragged image printed on the screen during the revert.
Anyone have an idea why and how to solve this?
Here is an example: http://jsfiddle.net/cRDMX/1/
Javascript
var next = false;
$(document).ready(function() {
$( ".slider .btn" ).draggable({
revert: function() {
if(next) {
$("#container").addClass("active");
alert("open")
return false;
} else {
return true;
}
},
axis: "x",
containment: "parent",
drag: function() {
var lft = $( ".slider .btn" ).position().left;
if(lft > 190) {
next = true;
}
}
});
});
Environnement:
iPad 4
iOS 6.1.3
I use jquery-ui-auto-complete-with-multi-values. My textbox is downstream of page, But autocomplete-menu is opened above the page. I cant understand this bug. I used example that is on jquery site. Its is same examle.
I add jquery and css at the page.What could be the problem?
UPDATE
Script
<style>
.ui-autocomplete-loading {
background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat;
}
</style>
<script>
$(function () {
var availableTags;
$.ajax({
url: '#Url.Action("GetTags", "Question")',
type: 'GET',
cache: false,
beforeSend: function () {
// Show your spinner
},
complete: function () {
// Hide your spinner
},
success: function (result) {
availableTags = result;
}
});
function split(val) {
return val.split(/,\s*/);
}
function extractLast(term) {
return split(term).pop();
}
$("#tags")
// don't navigate away from the field on tab when selecting an item
.bind("keydown", function (event) {
if (event.keyCode === $.ui.keyCode.TAB &&
$(this).data("autocomplete").menu.active) {
event.preventDefault();
}
})
.autocomplete({
minLength: 0,
source: function (request, response) {
// delegate back to autocomplete, but extract the last term
response($.ui.autocomplete.filter(
availableTags, extractLast(request.term)));
},
focus: function () {
// prevent value inserted on focus
return false;
},
select: function (event, ui) {
var terms = split(this.value);
// remove the current input
terms.pop();
// add the selected item
terms.push(ui.item.value);
// add placeholder to get the comma-and-space at the end
terms.push("");
this.value = terms.join(", ");
return false;
}
});
});
</script>
Controller
[HttpGet]
public JsonResult GetTags()
{
var data = entity.Tags.Select(x => new { label = x.TagName, value = x.TagName });
return Json(data, JsonRequestBehavior.AllowGet);
}
Razor
<div class="demo">
<div class="ui-widget">
#Html.TextBoxFor(x => x.Title, new { #class = "my_text_box", id = "tags" })
</div>
</div>
<!-- End demo -->
<div class="demo-description">
<p>
Usage: Enter at least two characters to get bird name suggestions. Select a value
to continue adding more names.
</p>
<p>
This is an example showing how to use the source-option along with some events to
enable autocompleting multiple values into a single field.
</p>
</div>
Css
.ui-autocomplete {
position: absolute;
cursor: default;
}
ul, menu, dir {
display: block;
list-style-type: disc;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}
Thanks.
I found the problem. Its about CurCss in jquery-ui version that I have. In older version of jquery-ui has not this method. I got script refrence from google-apis. Problem is fixed now.
Thanks.
I am building an app using jquerymobile in phonegap. I am using he following code to achieve fixed header, footer, scrollable content using iscroll.js. The problem is that I am unable to scroll the content div. Pls help me.
enter code here<body onload="loaded()">
<div data-role="page" id="detail">
<div class="fixedHeader">
</div>
<div id="wrapper" >
<div id="scroll-content">
<div data-role="content">
<!-- dynamic content goes here -->
dynamic content goes here
</div>
</div>
</div>
<div class="fixedFooter" ></div>
</div>
#wrapper {
position:absolute; z-index:1;
top:45px; bottom:48px; left:0;
width:100%;
overflow:auto;
}
#scroller {
position:relative;
/* -webkit-touch-callout:none;*/
float:left;
width:100%;
padding:0;
}
Javascript code
var myScroll;
function loaded() {
myScroll = new iScroll('wrapper', {
onBeforeScrollStart: function (e) {
var target = e.target;
while (target.nodeType != 1) target = target.parentNode;
if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA')
e.preventDefault();
}
});
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);
i got iscroll working in jquerymobile by editing js as
var myScroll = [];
$(document).delegate('[data-role="page"]', 'pageshow', function () {
var $page = $(this);
// setup iScroll
$($page.find('#wrapper')).each(function(index) {
var scroller_id = $(this).get(0);
myScroll.push(
new iScroll(scroller_id, {
useTransform: false,
onBeforeScrollStart: function (e) {
var target = e.target;
while (target.nodeType != 1) target = target.parentNode;
if (target.tagName != 'SELECT'&& target.tagName !='option'&& target.tagName !='option' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA')
e.preventDefault();
e.stopPropagation();
}
}));
});
});
$(document).delegate('[data-role="page"]', 'pagehide', function () {
// unset and delete iScroll
for (x in myScroll)
{
myScroll[x].destroy();
myScroll[x] = null;
myScroll.splice(x, 1);
}
});
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
probably nobody is there on a friday of a long weekend to answer this...
Working with jquery mobile beta and jquery mobile Scrollview
plugin.
There are 5 divs which are renedred by the scrtollview plugin and they are successfully drawn in a carousel manner with 5 divs side by side...
<div class="scrollme" data-scroll="x">
<div class="indDiv"> one
</div>
<div class="indDiv"> two
</div>
<div class="indDiv"> three
</div>
<div class="indDiv"> four
</div>
<div class="indDiv"> five
</div>
</div>
$('div.indDiv').bind('tap', function(e){
var clickedDiv = $(this);
// snap clickedDiv to the middle of the page
});
I have this requirement that when I tap on a div inside this carousel, i would want to move the corousel programattically so that the tapped div is snaped to the middle of the screen. I do not see a way to do with the scrollview plugin methods... I am flexible to switch to another plugin too...
anybody??
Thanks
Mostly, this involves appending something to the end of the document body due to position:relative/absolute issues.
I've written a simple plugin that allows centering and shading... It might not be production quality, but I've been happy with it for a while.
(function($) {
$.fn.center = function() {
this.css("position", "absolute");
this.css("top", (($(window).height() * .4) - this.height()) / 2
+ $(window).scrollTop() + "px");
this.css("left", ($(window).width() - this.width()) / 2
+ $(window).scrollLeft() + "px");
return this;
}
var shade = 0;
$.fn.unshade = function() {
$('.shade:last').remove();
var $children = $('.shade-front:last').children();
$children.each(function(k, v) {
if ($.data(v, 'shade-replace-previous').size() != 0) {
$.data(v, 'shade-replace-previous').append(v);
} else {
$.data(v, 'shade-replace-parent').prepend(v);
}
});
$('.shade-front:last').remove();
return $children;
}
$.fn.shade = function(css) {
var $shade = $('<div class="shade"/>');
$shade.css( {
position : "absolute",
width : '100%',
height : '100%',
top : 0,
left : 0,
background : "#000",
opacity : .7
})
$shade.click(function() {
$(this).unshade();
})
$('body').append($shade);
// Record our element's last position
this.each(function(k, v) {
var $this = $(v);
var prev = $this.prev();
var par = $this.parent();
$.data(v, 'shade-replace-previous', prev);
$.data(v, 'shade-replace-parent', par);
});
// Add them to the shadefront
var $shade_front = $('<div class="shade-front"/>');
$shade_front.css("background", "#FFF");
$shade_front.css("margin", "auto");
$shade_front.css("text-align", "center");
if (css) {
$shade_front.css(css);
}
$shade_front.append(this);
$shade_front.center();
$('body').append($shade_front);
return $shade_front;
}
})(jQuery);
I am using this plugin and then binding the swiperight/left to the next/prev buttons.
https://github.com/Wilto/Dynamic-Carousel