Web app in progress is here. (corrected URL)
I'm trying to develop a music-reading quiz game for my daughters, using jQuery Mobile.
The part I'm having trouble with is the keyboard.
With "ordinary" html buttons, you can set the left/top/width/height css properties using jQuery's .css() method. But with jQuery Mobile, that doesn't seem to work. Anybody know how to move buttons in jQuery Mobile?
Here's an excerpt of the initial HTML for the keyboard buttons:
<div id="kbdC2E" class="keyboard">
<button class="pianoKey whiteKey" id="wk1" />
<button class="pianoKey blackKey" id="bk1" />
<button class="pianoKey whiteKey" id="wk2" />
<button class="pianoKey blackKey" id="bk2" /> <!-- etc. -->
And here's the javascript code to move them into position:
for (i = 0; i < numWhiteKeys; i++) {
var keyLeft = whiteKeyWidth * i;
var $key = $('button#wk' + i, $div).parent();
$key.addClass('pianoKey whiteKey')
.css({
// position: 'absolute', // from pianoKey class
left: keyLeft,
top: gap,
width: whiteKeyWidth,
height: whiteKeyHeight,
});
Note that we use the parent of the button#wk1 key, because jQuery Mobile has decorated our <button> HTML as:
<div data-theme="c" class="ui-btn ui-btn-corner-all ui-shadow ui-btn-up-c">
<span class="ui-btn-inner ui-btn-corner-all">...</span>
<button class="pianoKey whiteKey ui-btn-hidden" id="wk1"></button>
</div>
(You can verify the details by going to the web page and using a DOM/CSS inspector.)
When I run this, the result is that the parent div receives the added classes, by means of which it becomes position=relative; it also receives the top and height properties that I set:
<div data-theme="c" class="ui-btn ui-btn-up-c ui-btn-corner-all ui-shadow pianoKey whiteKey"
style="top: 72px; height: 90px; ">
<span class="ui-btn-inner ui-btn-corner-all">...</span>
<button class="pianoKey whiteKey ui-btn-hidden" id="wk1"></button>
</div>
However it does not receive the "left" and "width" properties that I set.
As a result, all the keys end up on the left side of the ancestor div, and they have the wrong width. Can anybody tell me how to effectively set the left and width properties?
Thanks...
P.S. update: For an illustration of what I want the result to look like, see here. This is not the mechanism I want to use, because by adding buttons at run time, it apparently bypasses JQM completely, thus losing the touch-friendly and cross-platform benefits I'm trying to get from JQM. But it shows the layout I want.
Have you tried adding the "px" to the width number? pretty much something like that:
.css({
// position: 'absolute', // from pianoKey class
left: keyLeft + 'px',
top: gap,
width: whiteKeyWidth +'px',
height: whiteKeyHeight +'px',
});
I'm assuming that whiteKeyHeight and whiteKeyWidth are well declared and you made sure of that using alert(). Also, on another note (oh what a funny joke here), you should not use position absolute this might cause some problems in different browser/resolution etc. You can use position relative to set the "left" attribute. Also, the float left seems to be the best answer since it all does that for you without the need to add any code but the class using the "float: left;" attribute.
This is not a direct answer to the question, as I belive that your values are just being rewritten due to the order in which scripts are being run, but
I suggest using div elements instead of buttons. Adding some classes to those divs will make them look as jquerymobile-ish as you want, and they don't need to be buttons at all... unless you want the application to be working without javascript too (I can't verify that at the moment)
[edit]
The second thing turned out a bit ambiguous... I'll elaborate.
I expect JQM to block or overwrite what you set. This can be avoided by reducing the ammount of JQM code that processes the buttons.
Inspect the buttins and copy most of their classes (this will give you the looks) and give those classes to some divs instead of button elements. Add your styles. Bind tap or click (I didn't see any bindings in your code at the moment) to get them to work - the same way you would have to do with buttons.
This is not a less-jqm-alike way to do that, you want to use relative positions and overlay buttons over other buttons - this is rather unusual, and so it needs unusual handling.
Another idea:
Have you seen this: http://jquerymobile.com/demos/1.0a3/#docs/buttons/buttons-grouped.html
or this: http://jquerymobile.com/demos/1.0a3/#docs/toolbars/docs-navbar.html
?
Maybe you don't have to position the buttons with position:relative at all (it's always a bit messy) just stick them together in two rows or stick pairs together as a column and set float:left on their wrappers. See what suits you
Well it's not functioning but is this what you wanted the key layout to do: http://jsfiddle.net/rg4wj/13/
Related
I want to adjust the height of some lines of texts by css-file. But I can't change css property and value directly, because the contents are displayed with Fluid of TYPO3.
This is my codes in a HTML-file:
<!-- for left side -->
<div class="anreisetag-zeit anreisetagabstand">
<f:for each="{anreisetag}" as="itemAnreisetag" iteration="iteration">
{itemAnreisetag.data.tx_anreisetag_zeit -> f:format.html()}
</f:for>
</div>
<!-- for right side -->
<div class="anreisetag-text">
<f:for each="{anreisetag}" as="itemAnreisetag" iteration="iteration">
{itemAnreisetag.data.bodytext -> f:format.html()}
</f:for>
</div>
Now my contents are displayed in frontend, but the height of the textline is different. My problem now is:
I want to adjust the height between the line of "anreisetag-zeit / anreisetagabstand" and "anreisetag-text", so that they have same height.
My idea:
I have an idea that I add a field in Backend which it has a type="input". I added this:
The field has a variable tx_anreisetag_zeit_abstand.
Also, every item has class name like this:
My final idea is that if I give a value in the input-field tx_anreisetag_zeit_abstand, then "margin-bottom" of the <p class="text-center"> is changed with the new value. Now anreisetagabstand p has "margin-bottom: 16px;". I want to change these value "16px" for example to "38px" from Backend.
in my CSS file now:
.anreisetagabstand p{
margin-bottom: 16px;
}
The class anreisetag-text will be changed anything. Just the style of "p element of anreisetag-zeit" or "anreisetagabstand" musst be changed. I've already defined some design with the calssname "anreisetag-zeit", so I want to use the classname "anreisetagabstand" to adjust the hight.
How can I realize this? If I don't use Fluid, then I can adjust easy...
Maybe can I change the css property and value from a JavaScript file to operate DOM? I've already tried it, but I can't change my css property and value. I think there are some error in my codes:
window.onload = function() {
var anreisetagzeit = document.getElementsByClassName('anreisetagabstand');
anreisetagzeit += ' p';
anreisetagzeit.style.marginBottom = '38px';
}
Adding:
If I adjust my texts in my richt text editor, then I have to give some spaces and I have to check the frontend every time if the height or distance between the time and the description:
Furthermore, I can't give spaces, if I use "list" in a rich text editor. I have to give some space on the left side of the point to display the list-items on the right side :
If I display them in frontend:
I hope someone can give me some advices. Thank you.
trying to align your text and time to be on the same horizontal level is proably more easy by changing the HTML-structure instead of playing arount with linebreaks and CSS.
CSS-based solutions will maybe work on a static viewport, but as soon as the textarea grows or shrinks the number of lines of text will also change and therefore not be properly aligned again.
If it is within your possibilities i would recommend to restructure your Template to something like this:
<div class="anreisetag-plan">
<f:for each="{anreisetag}" as="itemAnreisetag" iteration="iteration">
<div class="anreise-item">
<div class="anreisetag-zeit">
{itemAnreisetag.data.tx_anreisetag_zeit -> f:format.html()}
</div>
<div class="anreisetag-text">
{itemAnreisetag.data.bodytext -> f:format.html()}
</div>
</div>
</f:for>
</div>
With this structure you should be able to achieve your desired output alot more easy than before.
Before marking this question as a duplicate, I know there is one exact same question with the exact same problem but the solution isn't working for me. Here is the link to that question.
The problem is, I know tooltips are being initialized because when I hover over my button, this markup shows up in my DOM.
<div class="tooltip fade top in" style="top: -34px; left: 20.5px; display: block; "><div class="tooltip-arrow"></div><div class="tooltip-inner">Add Quotation.</div></div
But it isn't showing up in the browser! In case of inspect element, It shows me the exact tooltip but it isn't appearing. It's transparent! The JSfiddles and all are working but it's not working in just my code.
I am using Laravel Mix with Vue.js. Anything extra is to be done or I am missing something?
UPDATE: I have already added data-toggle, data-placement and title in my element on which I want a tooltip.
Although we need additional information ...
what you are describing is usually related to the parent position.
Try attaching the tooltip to the body when initializing it like so.
// AN EXAMPLE ELEMENT
<div class="tip" title="Some tooltip"></div>
// THE JQUERY
$('.tip').tooltip({
container: 'body'
});
Let me know if this changes things and please add your initialization code
and the item your attaching the tooltip to css position
Live Example:
https://jsfiddle.net/sagive/aq9Laaew/137936/
I am using ngInfiniteScroll to enable infinite scrolling on my website. In order to get it to work I have had to set the height of the outer div to a value as shown below. If I don't do this the Infinite Scroll feature is triggered
<div style="height: 1px">
<post post-item="item" feed-items="items.feed" feed-name="feedName" ng-repeat="item in items.feed"></post>
<a style="bottom-padding 7%" infinite-scroll="nextPosts()" infinite-scroll-distance="1" href ng-click="nextPosts()" class="show-more">No more posts to show </a>
</div>
However, setting the height:1px kind of screws up my css styling and I feel like it is technically cheating, especially since I have to do the bottom-padding on the
Does anybody know a way I can get the Infinite Scroll to not be triggered on all scrolling events without using the style="height: 1px
I have already looked at this post but it has not really helped. How do you keep parents of floated elements from collapsing?
Thanks!
http://binarymuse.github.io/ngInfiniteScroll/documentation.html
Typically, you will use the infiniteScroll directive on an element
that contains another element that uses ngRepeat to show a series of
elements based on an array (or object); the expression you pass in to
the infinite-scroll attribute will generally add additional elements
to the array, expanding the ngRepeat.
maybe you could try the base example:
<div infinite-scroll="nextPosts()">
<post post-item="item" feed-items="items.feed" feed-name="feedName" ng-repeat="item in items.feed"></post>
</div>
I have a Div in which there is a lot of other elements like (for ease of understanding using inline-styles)
<div id="MainItemList" style="width:300px; height:50px;">
<h4>This is a long content div</h4>
<ul> <-- A Long List of Li --> </ul>
<p>Click on an list item</p>
<other divs>...
</div>
And then there is a dynamic series of other divs and I want to make my MainItemList div to be positioned just below any div I click. Like
<div id="DynamicDivs">
<div id="Dyn1"></div>
<div id="Dyn2"></div>
<div id="Dyn3"></div>
<div id="Dyn4"></div> //And so one
</div>
So, now when I click on Dyn1 then my MainItemList div should be placed below Dyn1 div. I tried it with Jquery something like
var MainListDiv = '<div id="MinItemList"'>...A lot of Elements..</div>;
$(document).on('click','#DynamicDivs div', function()
{
$(this).append(MainListDiv);
});
$(document).on('onmouseout','#DynamicDivs div', function()
{
//Check and remove
$('#MainListDiv').remove();
});
but in this way everytime a user clicks on such a div, a long code is ran to append a lot of stuff into it and remove it when user moves out. On PCs it isn't a big issue but on mobile devices it gets to much slow and that is making everything worse and worse.
What can be the trick to do so? I have made my above code running for 1 month and now it is being a headache when user complains.
Actually there is a list of some kind of pictures and icons on which user clicks then that item is appended to dynamic div and MainListItem must has to be just below Dynamic div so user click and be removed when onmouseout from that.
In my JQuery code everytime div is created and removed. MainItemList div is created on page load and is permanent (created once on page load but hidden) so it just has to be become visible and moved under any div user click and hide when mouseout? And one more thing which is making matter even worse is that when page scrolls, moves Dynamic Divs that's important :(
As you know, unhiding #MainListItem and giving it a fixed position next to the hovered-over div should do the trick, paying care to provide a correct 'top' value. The complicated part is figuring what a correct 'top' value would be. Using your example alone, that would be: the dynamic-div's top + the dynamic-div's height + any margins/other-spacing above.
Here's the code to make it happen (I included a basic fade so it's a little more seamless):
var marginOffset = 0;
$(document).ready(function(){
marginOffset = $('#DynamicDivs').offset().top;
$('#DynamicDivs div').mouseover(function(){
$('#MainItemList').css({ position: 'fixed', top: $(this).position().top + $(this).height() + marginOffset}).stop(false, true).fadeIn('fast');
}).mouseleave(function(){
$('#MainItemList').stop(false, true).css({ display: 'none', position: 'static' });
});
});
I have NOT tested this across multiple mobile devices, so do your due testing please. However, this method should be significantly less taxing on mobile devices than the appending html method.
Furthermore, this only handles the pop-up with scrolling. If you wish to have the pop-up list be delayed before it disappears, or if you have some complex margins, you'll have to revise the code accordingly.
JS Fiddle example: http://jsfiddle.net/wXKfv/10/
EDIT:
After further discussion in the comments, here is the Javascript that solves the specific problem:
$(document).ready(function(){
$('#DynamicDivs div').mouseover(function(){
$('#MainItemList').css({ position: 'absolute', top: $(this).position().top + $(this).height()}).stop(false, true).fadeIn('fast');
}).mouseleave(function(){
$('#MainItemList').stop(false, true).css({ display: 'none', position: 'static' });
});
});
JS Fiddle example: http://jsfiddle.net/wXKfv/11/
Your approach is wrong. Put the MainItemList and DynamicDivs in to separate divs. Instead if appending to the existing div try replacing the MainListDiv. or put an .empty() before append()
-or-
Assuming you are loading the MainListDiv via ajax:
load the MainListDiv on to the body and hide it.
on click event for "DynamicDivs div" position the div with jquery and css under the DynamicDivs
Is there any way to align google plus button to right? It seems that g+ button holds some place in case there were more digits. It would be nice if sulution could be using only css/html - no javascript.
update It apears that google has changed a little bit api of 1+ button since yesterday, but still it seems impossible to align it to the right.
update 2
Question has been asked on Aug 24 '11. Since then Google+ has changed several times. There's no need to spam answers to this post anymore (repeated, and same answers!). Options you all suggest didn't existed at the time. Check out parameters on google+ documentation webpage: https://developers.google.com/+/plugins/+1button/?hl=pl#plusonetag-parameters
Nowadays you just add data-align="right" to your <div>. For example:
<div class="g-plusone" data-align="right" data-size="medium" data-href="http://www.mywebsite.com"></div>
That will keep the contents of the <iframe> aligned to the right.
If you would like to align the +1 button right, you should either use the 'tall' form factor, since it expands up, or configure the +1 button to not display the count. Either of these will remove the slack space for numbers on the right side. The documentation explaining how to do this can be found here: http://code.google.com/apis/+1button/#button-sizes
Now that the padding is gone on the right side you can use CSS to align the button.
Add the following attribute to the g:plusone tag:
align="right"
Got the solution from
https://developers.google.com/+/plugins/+1button/#button-sizes
Set the align attribute to right for the +1 button tag.
<g:plusone align="right"></g:plusone>
The easiest solution I have found is to just wrap the plus one button div in a container, give the container a class and style that to float how ever you require.
<!-- Google +1 button -->
<div class="plusonealign"><div class="g-plusone" data-size="medium" data-align="left"></div></div>
.plusonealign {
float: left;
}
encountered this exact problem yesterday. wrapped the namedspaced plus one tag in a div and floated right.
you could always use a stylesheet to override the inline styles that google send down the wire
so for markup like this:
<div class="myPlusOneWrapper">
<div id="theActualPlusOneWrapper" style="whatever google send down the wire">
<!-- blah -->
</div>
</div>
you could have this CSS:
.myPlusOneWrapper
{
float: right;
}
.myPlusOneWrapper > div
{
width: auto !important;
}
the width will then adapt to be as wide as it needs to be, and will take precedence over google's inline style
JS Fiddle
I would try to put the button into a div. Then I would make this div smaller than the button to cut away the right part of the button. You need to adjust the position and overflow options in your css.