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.
Related
I'm lost. I have no idea what I'm doing, so please forgive me if I write something stupid or don't understand your answers.
My goal is to have a modal box showing after clicking a button. That's the easy part and I accomplished that already, so yay me.
Basically, I'm using this code:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal2
Now, what I don't know how to do:
1) How do I change the appearance of the button? Can I change it to an image?
The only thing I could do is place an image IN the button (looks weird), but not replacing it.
2) How do I change the position of the button?
I would like to have few buttons on the left side of the screen (not website but screen). So I would need to adjust them to be on the left side, and I would also need to change the height of all the buttons.
Now, I changed the appearance and the position of the button when trying something else (a slideout), so I know it's possible. But the codes are different and I don't know how to "merge" them. The lines that work in the first one don't work in the another.
And I have absolutely no idea in what language it is. I know that it uses this createElement thing to create this button, but I don't know how to change anything about it. I went through the whole w3school and many topics on this site but I don't know how to use this knowledge - so maybe you could help me out. Thank you!
If you want to use an image to open the modal, you should not use the button tag. Just attach your event to an img.
using the example code, replace:
<button id="myBtn">Open Modal</button>
with
<img id="myImg"></img>
and attch the click event to "myImg"
var img = document.getElementById("myImg");
img.onclick = function() {
modal.style.display = "block";
}
Repositioning is going to be a little more difficult to answer without seeing your full code. W3Schools has a good intro to CSS for beginners so I would start there.
Replace button to code similar to this id="myBtn" is important
<img id="myBtn" src="image url">
And check
https://www.w3schools.com/css/default.asp
Css is used to design the html elements
it have some property like
height, background-image , position , float , flex etc
which can help you to achieve your goals.
I've searched quite a bit, but all results reference using a custom image. I'm working with fluid layouts/retina displays and I'd like the button to be purely HTML/CSS.
Does anyone know a workaround/method?
Without seeing some code, I'd say hide the image with jQuery, then again use jQuery to create a new element with whatever content you want inside what I presume is the anchor tag used.
If javascript isn't supported, it'll show the image, if not, it'll show your new element (which you can style accordingly)
edit: ok, some clarification... use jquery to hide the existing input type="image"... then use jquery again to create a new input of type submit, do whatever you need it to do
Here's a fiddle to explain: http://jsfiddle.net/erinfreeman/PFZY8/
If there's a better way of doing it, I'm all ears. As below, I don't think jpann can add any additional code else it would simply be a case of hiding the existing input field and adding another.
Hi I was working on a project and the client wanted custom paypal buttons. I found a great site that provided custom code for the button: http://www.daddydesign.com/wordpress/how-to-create-a-custom-paypal-button-without-images/
You simply replace the input type="image" tag with an input type="submit" and style it. Hope this helps.
I am helping to maintain this website http://www.groupme.my/national/
For certain deals with a long list of options, when you click on the "Buy now" button, the options list popup will be partially covered by the deal below. For example, click on the "Buy now" button for this deal "[55% off] Korean Style Handbag...".
Please note that not every deal comes with options. If there is no options, clicking on "Buyw now" will bring you to the shopping cart directly.
I have tried to put in z-index, but it doesn't seem to do anything.
Please help to check how we can resolve this problem. Thanks.
If I understand your concern correctly, the element that fades in has a bottom edge that is behind the item that is beneath, right?
If this is the problem then z-index isn't going to help you because the thing that is fading in is being attached to a div (and it IS going above it) but it is going to be behind the div that sits on the page *after the one that the fading one is being attached to, so, the fading div is going to be behind the next one, no matter what.
The easiest way to deal with this is to draw them in opposite order, so that the divs are moving towards the zTOP as they go up, or to put it another way, set their z-order in reverse order to how they're drawn, so if you have 10 items, the first one will have a zIndex of 10 and the next one 9 and so on.
The z-index: 0 in content-wrapper-top seems the problem ; try to remove it.
EDIT added after comment : I found this z-index in the generate CSS (line:713):
.content-pane-index {
float: left;
width: 737px;
position: relative;
z-index: 0;<------------------------ HERE
}
Dr.Dredel explained the problem well, but if you don't want to do any reorder HTML, I have a workaround, maybe will be little stupid, but I think it should work anyway, I'll give you idea, I don't have any code to test any code :)
First, your z-index must not have that huge numbers, like 1000 then 50000! use smaller units like 5 10 15 and so, my code will work if you did that first, I used the largest number that must be on the page.
I'll use jQuery, for Buy Now button, add this code after show pop code:
$(this).parent().parent().parent().parent().parent().parent().css("z-index","999");
This code means find parent if buynow a tag and parent of the parent of a tag and so to div that have content-pane-index class name and add z-index for max.
you maybe can use this code instead too:
$(this).parents(".content-pane-index").css("z-index","999");
for close button you need to restore z-index that you added before, so add this code too after closing pop code:
$(this).parent().parent().parent().parent().parent().parent().parent().css("z-index","0");
or
$(this).parents(".content-pane-index").css("z-index","0");
I hope you got an idea at least :)
My code maybe need fixes like add or remove one .parent() method, or change selector that used with .parents().
I Love workarounds :P
if you want to show popup remove z-index from your popup CSS, for ex. I'm using z-index: 1000 in the other css
But I'm using other CSS for popup so go in popup CSS & find z-index and remove it.
I'm trying to position the jquery validate message under the select box and text box. I've almost have it working for "Change timezone" but not for "Submit". Not sure why the header Email alerts is positioned centered in the fiddle. It doesn't look that way on my page.
Here is the fiddle: http://jsfiddle.net/ALUQB/16/
Click both the change timezone and submit button to see what I mean.
First you missed the container div for he second tag and you need to adjust your position valuues. Here is a reworked example:
Reworked Working Example
on a webpage I've been working on I have a problem which I seem unable to solve.
I have a div with display set to none which I fade in. it contains form-element which are not being shown the way they are supposed to when wieved in IE.
you can look at it at http://www.orrmyr.se
Thanks for you help
Martin
have you tried having the form in another div inside the hidden one?
or us JS to hide the div onLoad instead of having hidden in CSS