I've been trying to have a simple image map on an image that is in a hidden div.
Once a button is clicked, the hidden div shows and on this image I want to place an image map. but its not working.
I got the show/hide from a jfiddle, take a look...
my button
[label for="home3"][img src="images/bt_modulo.png" alt="" width="92" height="72" /] [/label]
my hidden div
[div class="homeinfo3"]
[input id="home3" type=checkbox][div style="display: none;"] [img src="images/modulo_info.png" alt="" width="568" height="98" border="0" usemap="#modulomap" /]
[map name="modulomap" id="modulomap"]
[area shape="rect" coords="317,9,380,47" class="iframe fancybox-media" href="http://www.youtube.com/embed/azCeJoLcWhI?rel=0" /]
[area shape="rect" coords="385,10,444,45" class="iframe fancybox-media" href="images/Modulo-red.jpg" /]
[/map]
[/div]
When the image appears (div is visible) the map doesn't work.
What am I doing wrong?
test link is here http://manuki.net/test/test.html
The z-index for your "homeinfo3" div is 20, while the "imgright" div is 999. The imgright div is on top of your homeinfo, and therefor on top of your map. Increase the z-index of homeinfo3 to 1000 and your map will start working.
Related
I can currently add a container element from the sidebar to my diagram and drag and drop text to the container, where each text line added to the container becomes a separately selectable element.
I want, when I drag and drop more text lines to the container than the container can display, is the container to switch to being vertically scrollable instead of the container resizing to accommodate the additional text lines.
Is there a way to accomplish this?
Create a new document,then go to Extras -> Edit Diagram...:
replace the content of the dialog with this:
<mxGraphModel dx="942" dy="546" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" math="0" shadow="0">
<root>
<mxCell id="0" />
<mxCell id="1" parent="0" />
<mxCell id="hHBZA0x96M1ugzBaWHee-3" value="<div style="overflow-y: auto; height: 200px " class="s-prose js-post-body" itemprop="text"><br/> <br/><p>I can currently add a container element from the sidebar to my <br/>diagram and drag and drop text to the container, where each text line <br/>added to the container becomes a separately selectable element.</p><br/><p>I want, when I drag and drop more text lines to the container than <br/>the container can display, is the container to switch to being <br/>vertically scrollable instead of the container resizing to accommodate <br/>the additional text lines.</p><br/><p>Is there a way to accomplish this?</p><br/> </div><div class="s-prose js-post-body" itemprop="text"><br></div>" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;overflow: scroll;" parent="1" vertex="1">
<mxGeometry x="40" y="60" width="320" height="200" as="geometry" />
</mxCell>
</root>
</mxGraphModel>
Main change is:
style="overflow-y: auto; height: 200px "
You'll got something like this:
Then you can duplicate block.
you need to edit html text (double click in text inside a block and click in the button </>) and add a div wrapper with a style
<div style="height: 100px ; overflow: scroll">
continue you need to edit style of block and add
overflow=fill
I am using an icon in the footer using fragmentation. On press of the icon, it opens a popover. I want the popover above the footer but it is opening below it and no content is visible.
sapui5 <xml>
<footer>
<OverflowToolbar id="otbFooter">
<ToolbarSpacer/>
<OverflowToolbarButton text="Add" icon="sap-icon://add" press="popover" class="popover"/>
</OverflowToolbar>
</footer>
Set placement property of sap.m.Popover to Top.
<Popover title="{Name}" placement="Top">
I've got a view control in a panel but can't seem to get the view control to center within the panel. I've tried adding to the All Properties style "text-align:center;display:block;". Any thoughts on how I can get this view centered?
thanks,
clem
<xp:panel style="text-align:center;display:block;"
id="presentationView">
<xp:viewPanel rows="30" id="viewPanel1">
<xp:this.facets>
<xp:pager partialRefresh="true"
layout="Previous Group Next" xp:key="headerPager" id="pager1">
</xp:pager>
</xp:this.facets>
<xp:this.data>
<xp:dominoView var="view2"
viewName="PresentationStore">
</xp:dominoView>
</xp:this.data>
<xp:viewColumn columnName="PresentationTitle"
id="viewColumn1" displayAs="link" openDocAsReadonly="true" styleClass="footer">
<xp:eventHandler event="onclick" submit="true"
refreshMode="complete">
<xp:this.action>
<xp:openPage name="/Comp_Presentation.xsp"
target="openDocument">
</xp:openPage>
</xp:this.action>
</xp:eventHandler>
</xp:viewColumn>
</xp:viewPanel>
</xp:panel>
You can use the following:
<xp:panel>
<xp:div style="display: table; margin: 0 auto">
<xp:viewPanel rows="30" id="viewPanel1">
<xp:this.facets>
<xp:pager partialRefresh="true"
layout="Previous Group Next" xp:key="headerPager" id="pager1">
</xp:pager>
</xp:this.facets>
<xp:this.data>
<xp:dominoView var="view1" viewName="($All)"></xp:dominoView>
</xp:this.data>
<xp:viewColumn columnName="$106" id="viewColumn1">
<xp:viewColumnHeader value="Date"
id="viewColumnHeader1">
</xp:viewColumnHeader>
</xp:viewColumn>
</xp:viewPanel>
</xp:div>
</xp:panel>
Just replace the view data with your own code
Wrap a DIV tag and center that DIV tag. I usually open my viewPanels at 80% so it expands to the browser window.
I have a site I created: http://www.raggeddaisy.com
On my Wooden Signs pages and Chalkboards pages, the 'Request More Information', only the top little bit of the button is clickable. The code is the same as my Magnetic Board and Wooden Benches pages. Why would this be? Thanks in advance for your help.
<div id="requestInfoButton">
<form action = "ContactUs.cshtml">
<input type="submit" class="button" value="Request More Information">
</form>
</div>
#requestInfoButton {
font : 10pt 'Century Gothic';
padding-top : 2.25pt;
position : absolute;
left : 500.00pt;
top : 400.50pt;
width : 150pt;
height : 16.50pt;
}
That's because your div with id 'optionsWoodenSignLargePrice' is covering it. I wouldn't advice the styling you've used for just the text and especially the absolute positioning.
However, removing the width and height attributes from the div#optionsWoodenSignLargePrice styles does solve your problem.
It looks like you have two divs that are absolutely positioned with a fixed width that cover the majority of that request more info button. If you remove the width on div#optionsWoodenSignSmallPrice and div#optionsWoodenSignLargePrice your button will be clickable.
I am creating a division, in which there are some elements. For the example below, there is a sentence inside a division. However when the sentence becomes very long when I insert something through ajax, it seems like the height of the division does not change.
<div style="width:300px;min-height:10px;background:red">
<div style="width:100px;height:inherit;background:blue;float:left"></div>
<a style="width:100px;height:10px;float:left">The length of this sentence is always changing.</a>
</div>
you have to set the height for the div using javascript or using jquery
assign a ID to div e.g
<div style="width:300px;min-height:10px;background:red" id="test">
<a>The length of this sentence is always changing.</a>
</div>
$.ajax({
$(function() {
$("#test").width(100).height(200);//set height or width here
});
});
try to set the height here...