I have been put in charge of a site for one of our clients that was built by an outside company. One of the additional requests is that she wants to be able to position an image on their news page either on the left, right or centred.
There is an administration system in place where the client can create a news article and add an image however I need to know if there is anyway I can change the image position on the 'news items' page depending on whether the left, right or centred radio button has been checked on the administration panels 'add a news item' page.
I think it is possible with Java but it's not something I have had to do before and am looking for a nudge in the right direction really.
I think it is possible with Java but the tutorials I have found show me how to change the css with Java on the current page but not on a different page.
Any advice would be much appreciated
Write 2 css classes, class1: for left alignment and class2: for right alignment. Suppose if there are 2 radio buttons. On click of each radio you can toggle value of class.
$("#radioId1").click(function () {
$('#para1').removeClass('class1');
$('#para1').addClass('class2');
});
$("#radioId2").click(function () {
$('#para1').removeClass('class2');
$('#para1').addClass('class1');
});
Related
Note:
The code is written using angular on UI.
UI is like a chart - and I want to mouse hover on top right corner and click on that blank space which will show me a dropdown.
If you directly use hover over on the invisble element, it won't work. you need to use hover over on parent element which is visible always.
eg: please see the 2 screenshot
Before :
After:
Here, I need to click the edit icon and delete icon
Both icons are not visible by default
but the (parent) whole first element box is visible.
I tried the mouse hover over on the serial number of first row.
So icons will be displayed
then, I clicked them
I hope this will be useful !
used movebyoffset as element was not visible directly due to angular.
Searched it on intenet no one answered this.
always use movebyoffset if code is in angular. And then use action class to build and perform click.
For getting exact x & y cords use this tool - chorme web app -> coordinates.
example:
I have my website for a sneaker brand.
I'm creating a new website beside to prepare the new collection, more minimalist design etc.
I did it on Wells template (because I want a sidebare navigation)
I would like to know a few things, such as :
Put the logo on the top center of the page instead of the top left
Add the card on the top right of the screen
Add a color on the text navigation when I go over it
Add a filter color on some picture when I go over it
Add a footer on all the pages
Structure and design options are set on Squarespace templates so for much of what you're asking here, you'll need your own code. For example, there's no built-in option to set a footer on the Wells template. It says so here: https://support.squarespace.com/hc/en-us/articles/206545647-Wells-template#toc-footer
One thing though, for having a different color on navigation links when you hover over the word, go to the Design panel, then go to Site Styles and find the navigation design option for Navigation (Hover) Color. This might help: https://support.squarespace.com/hc/en-us/articles/206545127-Wells-Site-Styles-tweaks#toc-site-wide-options
Right now, I'm using Java Swing to create a JEditorPane primarily for its ability to have hyperlinks. I've successfully been able to display links and have them execute behavior upon a click, but I'm running into a few problems with formatting.
How can I set the cursor so that it normally is an arrow, but changes to a text cursor when hovering over text? (In essence, the behavior a cursor has within a web browser). I tried
EditorPane.setCursor(new Cursor(Cursor.TEXT_CURSOR))
but that made it a text cursor everywhere, even when not hovering over text. Right now, hovering over a link shows a pointer hand; I'd like to maintain that functionality as well.
What is the best way to show tooltips or mouseover text when hovering over a link? I tried modifying the title attribute of the link but nothing showed up.
I was trying to implement links to skip down to a subsection of the page, much like http://en.wikipedia.org/wiki/Xkcd#History would take you directly to the History subsection of Wikipedia's xkcd page. How can I do this?
An answer to any of these would be great (and multiple would be awesome xP). Thanks a lot for your help!
As you said one can simply give answers to a single point as well, let me try one by one, here is the answer for your last Point 3
Just provide an id to your tag like this
<h1><a id = "top"></a>First Line</h1>
Now somewhere in the bottom of your page write this :
<p>Return to TOP</p>
Clicking this link, you will reach the above area of the PAGE.
Points 1 & 2 may be addressed using the approach mentioned here. In particular, the view/model conversion methods will let you condition setCursor() and getToolTipText(), respectively.
You can get source from here http://java-sl.com/JEditorPaneStructureTool.html
It shows how to obtain text view bounds. First you get caret position for current mouse poiunter using viewToModel() method. Then go down the Views tree achieving leaf view and calcualte it's bounds. See this http://java-sl.com/tip_view_rectangle.html
If your mouse pointer in the view's rectangle then your mouse over text.
You can check whether the text in caret position is link and show your tooltip.
Use this http://java-sl.com/tip_links_in_editable.html to see how to detect whether mouse is over link.
Point 3.rd is answered by #nIcE cOw
I was asked to write a JDialog separated into left and right panel. The left panel shows a demo HTML template gallery (small sized), and right panel shows series or list of images. I want to make it such that I can drag image on the list and place it on the gallery (or maybe drag out some image from the gallery). The problem is I don't know where to start with this, can anybody give me some idea?
An HTML gallery typically uses JS to do the 'heavy lifting' (I'm guessing it will require a slideshow as well). While Swing components support HTML (to an extent) they do not support JS.
I recommend not trying to render the HTML/JS in the GUI, instead, provide a JList in the GUI of the image+name objects chosen by the user (using JFileChooser). When each image is selected, you can show the 'preferred name' in a JTextField that allows the user to edit it.
Image order can be shown by the order in the list. To change the order, implement Drag'n'Drop. See the Drag and Drop and Data Transfer lesson for more details.
You will probably need a JLabel in the CENTER of the GUI to display the (full size) selected image, and show the order & timing of the slideshow.
Once the user is happy with the image selections, the order, the names & timing. Offer them a button to write all the details to a single directory including the HTML, script & images (easier). Once the HTML is written, invoke Desktop.open(File) to display the finished product to the user.
As to how you do all that, it is really beyond the scope of an answer on SO. You would need to do the tutorial on each part, and come back with more specific questions.
Firstly I am no longer a student and doing this for other purposes, so don't hold back on the help ;)
I want to incorporate a simple program into my webpage. I want 4 buttons labelled right arm, left arm, activate voice and walk forward. There will be a box above these buttons showing an image of a robot and as the buttons are pressed by the user I want a different image to be loaded in the box.
So if the right arm button is pressed the image with the robot raising its right arm will need to be displayed.
So basically all I want the buttons to do is to load the image that belongs to each one. I am assuming java is the best choice? I have the open source Java package, would I need any other software when it comes to embedding it into a webpage? My webpage is done on dreamweaver and I am pretty good with html. Would appreciate it if someone could point me to the right direction.....Thanks
Don't use Java for this. Use JavaScript. Something like this:
HTML:
<img src="one.jpg" id="firstImage" />
<img src="two.jpg" id="secondImage" />
<button id="doSomething">Do Something</button>
<button id="doSomethingElse">Do Something Else</button>
CSS:
img {
display: none;
}
JavaScript:
var hideImages = function() {
$('#firstImage').hide();
$('#secondImage').hide();
};
$('#doSomething').click(function() {
hideImages();
$('#firstImage').show();
});
$('#doSomething').click(function() {
hideImages();
$('#secondImage').show();
});
What this essentially does is initially display no images, just buttons. Then as each button is clicked, the corresponding image is displayed. (And all other images are first hidden, since previous button clicks would have displayed previous images.)
This is an overly simple proof of concept, of course. At the very least you'll want to use better variable names :) This just demonstrates the idea of how you'd show/hide images in JavaScript in response to button clicks. (This also assumes the use of jQuery, which is a safe assumption these days. The easiest way to use that is to refer to a CDN link in your page, using a standard HTML script tag.) You can see this code in action here (though the images are broken, of course.)
If there are a lot of buttons and a lot of images, you may be able to re-factor the code to be less repetitive as well. Maybe store the images in an array and have a single button click handler which can associate the sending button with the correct array element, etc. That's up to you.
There are many technologies that could help you: javascript is one of them and it would be much simpler than using Java for such simple thing. You can use Java applet if you really want to use Java for that project.