I have been studying jQuery recently and wanted to try out some things on my own that the tutorial does not specify, I have searched online for it but can't find the answer. Basically I made a simple form text box and when the user focus' on the text box but doesn't type anything in and clicks somewhere else a message displays "Forgot to add text?" but i want to have an image pop up instead of just text, how would i do that?
enter image description here
$("input").blur(function(){
if( $(this).val()==""){
$(this).css('border','sold 1px red');
$('#box').text('Forgot to add text?');
ps: made a small yellow box in css and inside that box is where the message displays, thats why you see the "#box"
how about using CSS background-image?
if( $(this).val()==""){
$(this).css('border','sold 1px red');
$('#box').css('background-image', 'url(url_to_image.jpg)'):
$('#box').text('Forgot to add text?');
But don't forget sizing and positioning. ;)
Did not try it out, but it could work.
Related
Currently, my title overlays my cover image on my pages and posts. I do not like this and want it either hidden or removed. I've tried plugins and they don't work. What code can I use to do this? I have a child theme.
My Site with example of this: https://intentionaldetours.com/example-laos-article/
Plugins that didn't work and messed up my menu. I just want this text deleted on the display, I need it to show up in other areas of the site
Don't have any
Titles either not displaying at all on pages, and for post below the featured image
Do you want remove the text "Example Laos Article 2 months ago"? Is it?
If so, you can add some CSS code to hide it.
Something like:
.entry-header {
display: none;
}
I have a Google Partner Badge on my site, based on code that Google provides. They provide the code, and it creates a dynamic image on my site, that is clickable and a live link. However, the cursor does not change to a hand when over the image or indicate it is a live link in any way. In my opinion, this is bad UX.
I want to simply make the cursor change to a hand when hovering over the image.
But again, the original code is provided by an external site. Can this be done?
Try This:
<span style="cursor:pointer">
// external code here
</span>
inspect elements then find the container of that image, then add style on it.
.containerOfGoogleBadge {
cursor:pointer;
}
This is a cached map from the software: ogmaps
Please look carefully at the tiny shades below the address bar in the main window here.
On once clicking the minimize/maximize button, it gets showed up fully. Tested on firefox, and google chrome.
Can't say that this is the browser problem, since when I loaded this cached map on the Qt widget, I still had to click the minimize/maximize button, to get it gets showed up fully.
The html for the map is too long to be posted here. If there is any relevant section that you know of, then please tell me and I'll post it here.
EDIT 2
Finally I have managed to upload that html code here: http://code.google.com/p/earthhtml/source/browse/trunk/ogmap.html
Please have a look about the div tags.
Although this may seem like something trivial, it worked out for me. I had the exact same problem (among other GM problems) using GMv3 and couldn't figure it out.
I added a min-height to the div containing the map (with !important)
I removed ALL max-height & max-widths from the CSS
This fixed the 'small map' problem plus an additional problem I had with the GM pins and infowindows.
On top of that, make sure that there are NO divs with a high z-index on your page, as GM will resize the containing div not to interrupt with the top div. Another div with a higher z-index will also mess up the map and make the height and the width go crazy.
div#map{
min-height:600px !important; /* or any value that suits you */
position:relative;
margin-left:0;
margin-right:0;
left:0;
border:1px solid #979797;
}
I hope this works as good for you as it worked for me. If not, good luck!
After a few days of hounding google for an answer, I am hoping some genius out there is able to help me on this tricky problem im having.
Overall what I am trying to achieve is a 1 page website with a very large bg image that uses jquery to scroll between each div ( which is effectively the same as a 'page', set to 100% height ).
My problem is..
I have a body background image, that is approx 5000px height.
I have 3 divs that I want each to be 100% height of the browser window.
Thus when scrolling from div to div the body bg is underneath.
I cannot set the BODY to 100% height as that will simply 'cut off' my bg image to the browser height.
I need to keep my bg image in its full length.
Is there any possible way to achieve this?? I read somewhere you can set an ID to your BODY element however Im not sure that would be effective for what im trying to achieve?
I know some one out there has an answer :)
Mush appreciated
I have seen you example code now, and I think i found the problem.
You forgot to make the html tag 100% in height, this results in your problem. Try to do like this:
html, body { height: 100%; }
I made a jsFiddle demostation here: http://jsfiddle.net/Allan/Vx9dC/
I have a jqGrid that has add/edit dialogs with a form that's longer than the dialog height but the dialog won't scroll. I've tried to add an overflow: auto style to the dialog but no effect:
$("div.ui-jqdialog-content").css("overflow", "auto");
Although, if I change auto to scroll, I at least see a scrollbar but still no scrolling:
$("div.ui-jqdialog-content").css("overflow", "scroll");
This at least gives me a small glimmer of hope that I'm on the right track.
There doesn't seem to be any direction from the API documentation to support scrolling:
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing
Does anyone know how to add a working scrollbar to the jqModal dialog window used by jqGrid?
UPDATE
This is a total hack job but I got a scrollbar to appear and function doing the following:
setTimeout(function() {$("#FrmGrid_list").html('<div style="height: 300px; overflow: auto;">' + $("#FrmGrid_list").html() + '</div>');}, 1000);
I attached this to the afterShowForm event. However, this really doesn't solve the problem because it causes other issues with other fields.
I thought I'd share my solution for others to reference.
The form element has a default height: auto; style property which causes the overflow: auto; not to function as desired. To make the overflow scroll, the height needs to be set to a fixed number to constrain the form container and therefore make the overflow necessary.
I attached a css update to the afterShowForm Form Editing event, using the following code:
afterShowForm: function(form) { form.css("height", "300px"); }
Mind you, 300px is an arbitrary number that I selected for testing. That number will be tweaked to fit my needs. It may even be dynamically adjusted on resizing. Who knows.
Also, using Firebug I found that my form id is FrmGrid_list. My grid id is list (e.g. <table id="list"></table> and jQuery("#list").jqGrid({...});). If your grid is named something other than list, the form id (above) should reflect that.
Reference link:
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing
Your problem sounds strange. Every edit/add dialog has already a scrollable form with the name "FormPost" inside. This form has following style:
position: relative; width: 100%; height: auto; overflow: auto;
I just tested one jqGrid with a lot of controls and can scroll there without any problem.
The reason of the strange behavior which you have is probably that you either forget to include optional jqModal.js and jqDnR.js (see the same http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing page at the beginning) or use the wrong path to the files, so they will be not loaded.
This question is VERY old, but I'll add an answer anyway.
I don't know if this was possible before, but now you can simply use the dataheight property of the dialog (add or edit), to precisely set the height (in pixels) of the inner form. The default is 'auto', and thus it doesn't overflow. Setting the desired height shows the scroll-bar if necessary.
reference: http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing