Please help, this is really making me go crazy.
I am somewhat new to Javascript, and am trying to work with the Dojox.mobile framework...
Basically, what I want to do is have a button, that goes to a <div> which is located before the current one when clicked. This needs to be a normal html <button> or <div>, and can't be a ul, li, heading or similiar, since it is located in the middle of the view, not on the top or any sort of border (the exact location is given in the style tag)..
I tried implementing the dojo.back framework, but I can't seem to get it right with what should load or what should go where.
I tried implementing it with the OnClick property (which is how I implement all other buttons that go forward), but it causes total overlapping between all the divs.
I tried implementing it with the moveTo property, but I think that's only available to ul and li elements, not normal buttons or list elements (and if they are available to normal divs, I have no idea how to implement them).
And I have honestly no idea what else I can do, please help!
For dojox.mobile.View, there's a function called performTransition which can switch from one view to another. Here's a quick example of something you might could use:
HTML:
<div id="first_view" data-dojo-type="dojox.mobile.View">
<p>First view you see</p>
...
</div>
<div id="second_view" data-dojo-type="dojox.mobile.View">
<p>Second view</p>
<button data-dojo-type="dojox.mobile.Button"
data-dojo-props='onClick:function(e){goBackToFirstView();}'>
Back
</button>
</div>
JavaScript:
function goBackToFirstView () {
// load the view that should be visible
var secondView = dijit.registry.byId("second_view");
// transition slides back one
secondView.performTransition("first_view", -1, "slide");
}
Related
I am working on a drag and drop query designer using HTML5 with AngularDart and CSS. For this issue all I really need to figure out is how to format the objects in HTML5 and CSS. I am running into formatting/positioning issues with the object in CSS. If you look below I have a div with the class "queryElement". The queryElementLine, queryElementHead, and queryElementBody sections of the object were already in this object and were formatting/positioning properly.
This UI allows a user to drag and drop one element onto another element. Once dropped I act upon the object to add the new element as a child, but I need to judge where in my collection of elements to add the new dropped item based on which edge of the drop zone element the new/moved element is dropped on.
I recently added divs with classed called "somethingDropZone" (left,top, right, bottom). These are objects I want to use to determine where the dragged element is dropped. I want them to mimic the top,left,right, and bottom border. I want them to show a 3px gradient border on :hover so the user can see where they will be dropping the item they are dragging. Below is the element html and images that give a better idea what I am facing and what i want to do.
This is what the element box should look like.
Here is what it looks like when I add a left border div.
Everything in the element is pushed down and the left dropzone object with its border stacks above it. What I want is to position the left dropzone inline with the other query element content.
Here is an image I created to show basically where I would like all 4 dropzones to be positioned:
What I am mostly looking for is some CSS guidance in how to make the dropzone divs float where the above image shows.
HTML Code:
<div class="queryElement"
(drop)="onDrop($event)"
(dragstart)="onDragStart($event)"
draggable="true">
<div class="queryElementLeftDropZone queryElementLeftDropZoneDragOver"></div>
<div class="queryElementTopDropZone"></div>
<div class="queryElementBottomDropZone"></div>
<div class="queryElementRightDropZone"></div>
<div class="queryElementLine"></div>
<div class="queryElementHead noselect">
<span class="idSpacer">#{{cohortQueryElement.id}}</span>
<button class="elementButton noselect" (click)="edit()"><img src="/packages/GenomicsPortal/assets/images/PNG icons/Edit.png" /></button>
<button class="elementButton noselect" (click)="delete()"><img src="/packages/GenomicsPortal/assets/images/PNG icons/Trash.png" /></button>
<button class="elementButton noselect" (click)="toggleIncludeExclude()"><img [src]="cohortQueryElement.includeExcludeImagePath"/></button>
</div>
<div class="queryElementBody"> {{cohortQueryElement.displayName}} </div>
<div class="queryElementFoot"> {{cohortQueryElement.displayData}} </div>
</div>
After giving this question some additional thought, I think I will avoid the issue altogether by not adding new objects/elements to hover at the edges. That solution seems to be causing the formatting issues.
It occured to me, rather putting objects to overlay the edges of the box, I could instead determine x,y ranges defining the top, left, bottom, and right of the existing box and then act based on dragover or drop within those x,y coords.
I will post to let you all know how that works out.
My DOM currently looks like this:
<body>
<h1> </h1>
<button> </button>
<p> </p>
Upon click of the button, I want to add another p in between button and the initial p. I have tried prepending to the initial p, but it's not looking like what I want it to. I have also tried appending to button, but it's adopting the style of button, which I also don't want.
Ideally, I would like to retain the styling of the initial p, but add another individual block of p right before the initial one. How can I achieve this, preferably with append/prepend?
If you are using JQuery there is a method for that, it´s called before.
http://api.jquery.com/before/, will work fine in combination with the :first-child selector.
var count=0;
$('button').on('click', function () {
count++;
$("#paragraphs p:first-child").before($('<p>New Paragraph #' + count + '</p>'));
});
Working Example
This is a very rough draft of what you may want to try doing. Instead of attacking the issue from the paragraph attack it from the button if the DOM state is going to stay the same.
The code should look something like this
function addParagraph(sender) {
$(sender).after( "<p>Test</p>" );
}
And you can you the onclick event of the button like this (This can be changed to anything else you might want to use)
<button onclick="addPara(this)">Add Paragraph</button>
Now because your structure is always
<h1></h1>
<button></button>
<p></p>
It will always push the new element right after the button and always before the next element in the structure. The alternative is to do what Gus has done and create a DIV container and keep pushing new elements into the first place in the DIV.
I'm struggling to replicate the login form found at the top of the PayPal website.
I have been able to create the username and password fields including the 'blue glow' from searching the web for tutorials; however, I'm unable to find any coding to add the 'clickable' question mark to the field.
I would like to be able to replicate the drop down when the question mark is clicked.
Any help will be greatly appreciated.
I hope I have made it clear.
What you could do is in your form have the question-mark image trigger a java-function... Ex:
<img src="my_image.jpg" onClick="myjava_function()">
Then in your java function you could have a div containing the drop-down displayed.
<script type="text/javascript">
myjava_function(){
document.getElementById('mydiv').style.display="block"
}
</script>
Then in near the form you could have your div that contains the drop down first being hidden but shown on the click.
<div id="mydiv" style="display:none;"><form><select><option value=1>1</option></select></form></div>
This would be my approach to getting it done. Firstly, try and get a log that is similar to the question mark, and position it in the div that you would place your area at. In the CSS for the logo apply float right so that the logo would appear to the right of that div. Then build a whole div that appears when you click the log before hand and give it the CSS display none, hence it would not be shown. Write a javascript function that works with the onclick you apply on the logo that changes the CSS of that div to display block and hence the whole div appears when you click it. The div by itself has a cross mark that could trigger another javascript call to change the CSS to display none. Good luck.
I need a wee bit of help with css formatting on my website. Please see the provided screenshot, which relates to http://www.zerogravpro.com/.
css problem http://zerogravpro.com/temp/zgp_formatting.jpg
Problem #1: My orange-background box in the Testimonial sections goes quite a bit lower than I want it. How do I force it to move up, directly beneath the word "Testimonials"?
Problem #2: See the nice "More" button with the green ball and arrow in it? When I tried to use the same exact style down in my Testimonials box, it shows up as just a boring link. I want it to look the same as the button. I'm guessing that the style only gets invoked when it has the right hierarchy, but how can I fix this without messing up any other styles?
I provided the link to my website, so you can view it in Firebug and see exactly what the styles are, etc. Thanks!!
The Box below Testimonials is so low because there are two <br>-Tags below this line:
<p class="dotline"></p>
Remove them and it will fit.
And for the more button, you should add the class more to this <p>-Tag (untested):
<div id="testimonial6" style="">
<p></p>
</div>
The styles describing the button-like more-element is applied to a paragraph with class="more". However, the paragraph also includes a lot more rules than just the button, so you should try to extract the CSS regarding the button in order to make it reusable.
When it comes to positioning of the lower link, if you want to place it near the header you really need to move it closer to the header in the DOM.
There's an empty p element with the class of 'more' right above the testimonial box. Remove it and the testimonial box will be pulled up. Give it an appropriate margin top, and it will look good.
As for the button, here's my attempt at it -> http://jsfiddle.net/joplomacedo/c3vqh/
I am trying to integrate jquery cycle plugin and it works fine. I have navigation controls also in my slideshow. But the problem is that I need to set the controls as background image and should not display the prev next, pause and play links(texts). Please find my code below. If I delete the text of links(previous, next, pause and play) the slideshow wont work. So is there a way to make this text transparent so that user cannot see these links and only images are visible. Please help.
Previous
<div style="height:25px;width:25px;display:inline-block;background:url('Images/play.png')no-repeat transparent">Play</div>
<div style="height:25px;width:25px;display:inline-block;background:url('Images/pause.png')no-repeat transparent">Pause </div>
<div style="height:25px;width:25px;display:inline-block;background:url('Images/next.png')no-repeat transparent"> Next</div>
</div><!--controls-->
You can give it either of these CSS parameters:
display:none; or visibility:hidden;
The first one will remove it from the DOM so it won't take up space. The nice thing about this is it's directly interfaced with JQuery's show() and hide() functions.
The second one will keep it in the DOM and just make it invisible so other elements surrounding it will respect it's presence and the layout will remain unchanged. To toggle this with JQuery you'll want to use $('element').css('visibility','visible');