I have created a page containing a list of items. Each item has an image corresponding to it which when clicked directs the user to a new page containing more information about the item. For some reason, when I asked my friends to go through the site, most of them thought that these were non-clickable images. What can I do to make it more obvious that a user can actually click on the image? Below you can find a screenshot of the page I am talking about and this is a link to the actual page. Thanks in advance for your help.
1.You can add a title attribute to a link, like this:
<a title="Read more" href="https://thechallengeclub.wordpress.com/challenge-1-just-water/">
Then when user hover over the image a tooltip will appear:
2.You can add an easy to see "More" button. It's up to you where you add this button, but it may be necessary to change the layout a little bit.
For example:
Related
I have an issue regarding the popup position of facebook like button. When a user likes he will get a popup where he can type some text and confirm or decline the like. It's all perfectly clear.
Usually I put my like button plugin in the footer and I have no issue with that. User comes in, clicks like, popup appears, user scrolls a bit to see popup and all is well.
My problem arises from the fact I use parallax theme so when the user presses like page will increase its height to accommodate this popup and suddenly I can see the images from the parallax. This is ugly!
Please check the page here to see what I am talking about.
Is there a way to force this popup to open above the like button?
I didn't check it properly but why don't you try to make the position: relative where you put the fb like button and see your luck.
I've got a UI page in HTML5/AngularJS/Bootstrap. The page has a handful of dropdowns that are populated by the controller.js from a service call. I've got no problems parsing that information and getting it into the multiselect dropdowns. However, the brain trust that is our management and end-users have decided that in addition to the dropdowns displaying an abreviation for each selectable option, they want a popup description to appear next to each option when the user hovers over it. My personal opinions aside, I can't tell them no until i can at least show them what it would look like.
If this was just pure css, with panels dropping down, I could see how this would be easy that add some mouseover-style panel/popouts. But I'm using this angularjs-dropdown-multiselect.js plugin... which works great so far, but I'm not sure how to add to it. There's some code in that js that causes the option to slide slightly right, and change color when the user hovers over it, but not knowing enough about how that event would work, I'm not sure where even in the code to look for what changes on the mouseover.
For reference, the plugin came from here:
http://dotansimha.github.io/angularjs-dropdown-multiselect/#/
I can post the js code if anyone wants to take a look at that, but I'm not sure if that's even a necessary part of this question... My first thought is just to try and capture that event and maybe change the text of the display?
I've been researching this one for a good day now, and I can't find answers that apply to all parts of this puzzle... Has anyone got any experience or ideas on how to add that kind of functionality to a dropdown? or is this bordering on territory where I'm better off rigging a situation where I've got a textbox which, onFocus might display a dropdown - imitating panel, which could then have sub panels displayed on items?
Since I couldn't find a way to programmatically add tooltips on the angularjs-dropdown-multiselect directive, I assumed that you are willing to extend it and then I created a quick fiddle (based on examples available) to add the angular-ui tooltip on the creation of the items.
This is the link to the tooltip that will explain how to position it
https://angular-ui.github.io/bootstrap/#/tooltip
This fiddle will give you an idea of where to start: https://jsfiddle.net/silvioamaral/ghcma6z3/1/
on ln 232 that creates the <a> in the <li>:
template += '<a role="menuitem" tabindex="-1" ng-click="setSelectedItem(getPropertyForObject(option,settings.idProp))" >';
Just add the angular-ui directive :
uib-tooltip="{{option}}"
like
template += '<a role="menuitem" tabindex="-1" ng-click="setSelectedItem(getPropertyForObject(option,settings.idProp))" uib-tooltip="{{option}}">';
I added to the anchor since the other elements (<li> <div>) seem to be bound to options such as existence of groups / checkboxes, etc.
Hope it helps
Edit: grammar and jsfiddle link
I want to add a button in my drupal website which can redirect me to any specified article/page. Any suggestion will be helpful.
Use the Link module.
It allows you to add a field to your content type that has an href value and a Text value. Then you can change it's display output to output title as link which will output a hyperlink with the text you selected, and once clicked will redirect you to whatever href you set.
If you want to style it to look like a button you can add a CSS class to the Link field you added in your content type under manage fields >> Edit the link field.
I am using Bootstrap subtheme so the button CSS classes are already there for me. i simply add btn btn-default if I want to show a button instead of a hyperlink.
PS: DO NOT CREATE BUTTONS IN A BLOCK. Classes should never go into a block. And if you have clients who are going to use that site, they can mess stuff up pretty fast.
Create Block and put html code for button in block. Enable block on pages where you want.
While putting html code of button into block, please make sure that you have selected "Full Html" filter.
I apologize if the title was not clear enough. I am working on a project where a user can design a page (something like Wix). I am continuing on a project left in-complete by some developer. The sequence of action is.
The user clicks on a link which adds an element on the page (e.g. textElement, picture, slider...)
There is an edit button for each element. Clicking which opens a dialog box.
On the dialog box there are sliders and color picker drawn using Kendo-UI. Using them the user can change the style settings for the element (e.g Font-Color, BG-Color, Font Size...)
What I want now is to apply/show the changes live on that element. I have the id available for each element. I can bind each of the style selectors and apply the changes live to the text element. But that does not seem the right choice as in future we might add another style selector in the dialog box, and that would mean adding the code for binding this new selector.
What I wanted to know was that is there an alternate or preferably easy way to do this?
Regards
Share some code with the basic idea that you follow, cause it's not getting clear what you did. It sounds like you can use the MVVM framework feature to help you for that.
I need to align the Facebook likes count box to the bottom of my Like Button for my website. Can any one help me with this?
I need to position or style the fb button as shown:
You can get the count to appear above the Like button by setting layout_style = "box_count" - but there is no option to have the count display BELOW the like button.
http://developers.facebook.com/docs/reference/plugins/like/
While you may scale the size to suit your needs, you may not modify the Like Button in any other way (such as by changing the design).
Please see the Facebook Like Button Usage section at the Facebook Brand Permissions Center.