some
something.html
<div id="div1">IMAGES</div>
<div id="div2"> content</div>
The problem is i have few images in div 1 tag.when i click href it doesn't go to div2 .code is working properly if div1 contains text alone.my problem is my div1 has few images.So when i click my href it doesn't goes to div2
Related
When I click on an icon, a popover shows.
I realize that there is delay set with the popover, but when I scroll, the popover moves as well.
How can I make it stay where the icon is and not work with scroll?
<md-badge class="current-plan-type__icon--badge" direction="right" [mdPopover]="tootltipTemplate" delay="10000"
popoverTrigger="MouseEnter">
<i class="cui-icon icon icon-info_16 current-plan-type__icon--info"></i>
</md-badge>
Just move tootltipTemplate outside of your scrolleable div it will be called even if is not at the same level.
I think you have this problem: the popover template inside of the scrolleable div.
<div #root>
<div #scrolleable>
<div #tootltipTemplate></div>
</div>
</div>
Then my suggetion is: moving out the popover template of the crolleable div.
<div #root>
<div #scrolleable>
</div>
<div #tootltipTemplate></div>
</div>
I hope it works for you.
I have a 2 divs. The first div disappears on hover and the second div takes its place. My second div contains a link inside. My problem is on mobile devices I can't see the content of the second div because when I click on the first div the hover effect on the link takes the lead.
<div class="boxInside">
<div class="content">
... some content
</div>
</div>
<div class="boxInsideHover">
<a href="exemple.com">
<div class="content">
... some content
</div>
</a>
</div>
What I want on mobile is one click to see the second div's content and another click after for the link.
Thank you
So my issue is as follows.
I have a div that contains both an image and a div (which contains text). The text contains a title and additional content, separated by a line break. See below or my attached codepen for an example.
<div class="outer">
<img src="something.com/pic.png">
<div class="inner">
Title<br>Additional text.
</div>
</div>
Here is my code pen
When I apply display styling of inline to the inner div, the title is inline with the bottom of the image and the text following the linebreak is below the image. Furthermore, if I wrap the text in paragraph tags, all of the text is below the image.
I would like the title to appear at the top and to the right of the image, and all content of the inner div to remain at that alignment, even if the text extends past the height of the image. Furthermore, in the future I will be adding a div with an additional image and more text inside the inner div beneath the text that is already present, and I wish for that content to maintain the same alignment.
Here is my end goal:
And my desired html structure:
<div>
<img>
<!--Start right indent (from top right of image) -->
<div>
<p>Title<br>text</p>
<div>
<img>
<div>
<p>Title<br>text</p>
</div>
</div>
</div>
<!--End right indent -->
</div>
It appears I have found the solution.
.post img{
display:inline-block;
vertical-align: top;
}
.post_content{
display:inline-block;
width: 90%;
}
My codepen: Code pen
I have one div. Inside that div I have an a tag and inside that a tag I have another div. I am adding a CSS class using ng-class but when I click on the div and on the text of the div it gets colored separately. If I click on the div in non text area the whole div gets colored. I want the whole div colored even when I click on text on that div
Thanks in advance
code:-
<div class="menu_links" ng-repeat="menu in links.data" ng-if="menu.display_menu==1" namemenu="{{menu.menu_name}}" >
<a ng-if="menu.menu_id != 1" class="speedlinks left skyBlueBack marRt15px marBot10px text-center">
<div class="data linkBox" ng-click="toggle($event)" valSet_link_name="{{menu.menu_name}}" valSet_link="{{menu.menu_link}}" valset_display="{{menu.display_menu}}" ng-class="{active: menu.menu_link == currSpeedLink}">
<b>{{menu.menu_name}}</b>
</div>
</a>
</div>
I have the following code to load different div with different content by clicking on a link. My question is how can I write so that not reload the page every time I click on a link.
#content > div {
display: none;
}
#content > div:target {
display: block;
}
Div one
Div two
Div three
Div four
<div id="content">
<div id="div1">This is div one</div>
<div id="div2">This is div two</div>
<div id="div3">This is div three</div>
<div id="div4">This is div four</div>
</div>
you can add onclick event to the link tag like , then in the js function clickFun() you can do some logic to display and hide specific div area.
You could either use jquery to hide 3 of the divs and show the other one (if they aren't too big to render) or use bootstrap tabs or similar if they are basically whole pages you want to tab between
You should set document.location.hash to your anchor. For example for div1 link :
Div one
EDIT> since previous code keeps reloading the page. the following approach (inspired from what other answer suggests) seems to fit :
Div one
http://jsfiddle.net/5XqyX/