I've got a html-page with a picture on it and would like allow the user to click on the image to add a red dot and a title to the red dot. After adding some dots he should be able to save or print it.
What's the best way to implement this with ruby on rails, html, css and (or without) javascript.
For a very simple thing, I would put there a <div style="position: relative; top: ?px; left: ?px"><img src="red dot.jpg">Dot title</div> wherever user clicked. onclick event in the background to do the trigger, and here is how to get the Cursor Position.
position: relative assuming that the whole thing is inside a <div> block. Take a look at document.createElement and appendChild, you will need them.
Maybe you want also to save the plottings under the hood to dispatch what's user doing to the server.
To save doing round trips to the server, what you could do is to draw the dot and title on the image directly in the browser.
It can be achieved with the HTML5 <canvas> element, SVG, or Flash etc. Canvas has very good browser support, I'd use that.
Is it a matter of showing a gallery of pictures and selecting which ones to print or save?
It might be more straightforward to embed a table of images in a form, and use checkboxes to make selections.
One possibility would be the following:
Create the view containing the image with Rails
Handle the click events with jQuery.
When the user clicks show a Javascript dialog asking for the title
When the user clicks OK, send an Ajax request to your Rails controller notifying your application about a new dot.
The controller then should add that information to a database or the session and update the picture, i.e. actually add the dot with some image library, like ImageMagick for example.
Then re-load the picture after the Ajax request is completed.
You could possibly create this with CSS.
<div class="image">
<div class="permalink">Click here.</div>
<img src="#" />
</div>
Then, your CSS should look like this:
.image .permalink { display: none; position: absolute; top: 0px; left: 0px; }
.image:hover .permalink { display: block; }
.image .permalink { background: url(red-dot.gif) no-repeat; }
Related
I'm trying to embed a google form on my blogger blog but I want to remove or hide somehow the branding link and text that google shows at the end of the form: https://docs.google.com/forms/d/e/1FAIpQLScKGwCTQXaDGgAucW_dpk3CzOBofXbUrIskKxu_IGR-gssyXQ/viewform?usp=sf_link
Is it possible somehow to hide that or make the text from that class the same as form color so it cant be visible by user? Thank you!
I'm afraid not!
I've been having the same problem; this is called a Cross Origin Policy issue or CORS for short.
Due to security issues, JS rejects to read or change the content of a page in another domain; so you can't use JS to do this. CSS also only acts on the content on the page but the content of the iframe is not on the page.
But a cross-over
you can use blank rectangles to not let them be shown but it's not really guaranteed.
:root {
--hiderColor: red;
}
#hider {
width: 640px;
height: 55px;
margin-top: -50px;
background: var(--hiderColor);
position: absolute;
z-index: 10;
}
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLScKGwCTQXaDGgAucW_dpk3CzOBofXbUrIskKxu_IGR-gssyXQ/viewform?embedded=true" width="640" height="937" frameborder="0" marginheight="0" marginwidth="0" class="iframe">Loading…</iframe>
<div id="hider"></div>
It's not really escape-proof but it does the trick; also I shall say you shouldn't do this!
By the way, I used the red colour so you know how it works you, can change the colour;
And a note: the widths of the div and iframe must be one and the same
Good luck!
External iframe means you have no control on what's inside.
I had that problem for something I made for a class, I used
div.a {
display: none;
}
I haven't tried it, but you should be able to use
<p style="color:black">(Link Here)</p>
To recolor the text. Again, I haven't done much restyling of links, but these should work.
I'm a beginner in html's world. I'm playing this game: https://dragonbound.net
I'd enter to the "shop". and I'm wondering me about the html code of this. So I went to "inspect element" of the web and I realized that there is no form or href in the buttons.
How these buttons works and Why I can access to the container of the middle that has the items?
For example, this is one of the "buttons"
#buttonShopEyes {
left: 407px;
top: 495px;
width: 33px;
height: 31px;
background-position: -72px -204px;
}
<div id="buttonShopEyes" class="opacity_button NoSelect shopButton"><div class="Alt" style="display: none;">G</div></div>
When i go to the source, i can see:
<div id="buttonShopEyes" class="opacity_button NoSelect shopButton"><div class="Alt">G</div></div>
Many HTML elements can behavior like buttons. For instance: a, divs, spans, p, etc. However, if you want to develop a consistent code, you should pay attention to the semantic. If you need a button, create a button element. You can change all style properties for the button if you want. If you create a Some place element, you should redirect the user to another place, (i.e. another page, or another anchor, in the same page). Avoid using <a href="javascript:void(null)"> or <a href="#">, instead, use a button in that cases.
HTML is free to use of many ways, you should be aware of the best practices.
So I am really new with javascript, html, and css and am currently in the process of creating a game web application. I would like to be able to have kind of a pop up box when you click on a card the appears in the middle of the screen showing the options that you can click for that card (meanwhile the main page colors get darker) and when you select one of those options it goes away (Or if you click off of the popup).
I'm not sure if I'm explaining it very well, but I don't even know what to look up online because I don't know what that is called or even where to start with that. Any ideas?
Make a div in your html and a :
<div id="test"></div>
<div id="card"></div>
give the diff a background color using rgba to enable transparency and the default display value set to none and give it 100% width and height:
#test {
width: 100%;
height: 100%;
display: none;
background-color: rgba(255,255,255,0.6);
}
Then in javascript u can use an event listener on click to trigger change the display state to block:
document.getElementById("card").addEventListener("click", function() {
document.getElementById("test").style.display = "block";
});
Here is a jsfiddle so you can check it out: click
I'm having some trouble positioning the Google +1 button on my website. The div is as follows:
<div class="g-plusone"></div>
The CSS I'm using is pretty simple:
.g-plusone
{
position: absolute;
top:95px;
left:715px;
}
Despite what would seem straightforward, it simple does not want to move.
I know for a fact that the div in question is being accessed. What's strange is that other social sharing buttons, such as the FB like below follow the same syntax and are positioned perfectly.
.fb-like
{
position: absolute;
top:62px;
left:715px;
}
Adding !important to the values does nothing, unfortunately.
Any ideas?
When Google loads +1 button the .g-plusone class seems to disappear, so try to put this DIV inside another DIV, as illustrated below:
HTML:
<div class="google-button">
<div class="g-plusone"></div>
</div>
CSS:
.google-button
{
position: absolute;
top:95px;
left:715px;
}
After page loads, the Google div called g-plusone turns into a lot of code, but, you can manipulate this button with id generated.
In my case, for example, to align the button in the middle of the line I put:
#___plusone_0{
vertical-align: middle !important;
}
Note: The id ___plusone_0 is the id generated by the google codes. Do whatever you want with this id.
Use something like Firebug to ensure you're targeting the correct element. The +1 button is very deeply nested, so you'll most likely need to look further up the DOM tree to get to it's outermost wrapper. You will be able to set the position of that without needing to use !important or anything, so I would definitely check this first.
Sorry, I would have just added this as a comment above but I don't seem to be able :)
I'll preface this question by asserting that I'm no "Web Guy". I have little to no experience programming in JavaScript, or any other Web-based programming technology aside from XML and some related XSLT; go easy on me!
What I suppose I'm trying to create is something akin to an imagemap: I would like to place an image on a webpage then, based on information I've received back from a hardware chassis, populate the various "hardware slots" in the image of the chassis with an image of the piece of hardware that is in that location.
I'd like to create these points and have them relative to the image, not the browser window, so that I could create the image of the chassis anywhere and still place the images of the cards over their appropriate slots.
Is there a mechanism for using vars to hold the offsets, and then placing the other images, using those var offsets relative to the chassis image? Is there a different way to do this sort of thing?
You could simply put them at the correct positions using CSS absolute/relative positioning.
Another solution would be using a <canvas> to actually draw an image consisting of multiple other images.
I agree with ThiefMaster, and a sketch for some markup would be something like this.
<div class="chassi">
<div id="slot1" class="slot"></div>
<div id="slot2" class="slot"></div>
// more slots if needed
</div>
<style>
.chassi
{
position: relative;
background: url(/path/to/your/image.png);
}
.slot
{
position:absolute;
}
#slot1
{
left: 20px;
top: 20px;
}
#slot2
{
left: 20px;
top: 60px;
}
</style>
Then using javascript to load the slot data, and adding images to the "slot"-divs.
Its called image mapping and you can read about it here