I am stuck. Here is what I have going on, I have an AddThis sharing widget next to a main image on a webpage. The image changes sizes and I need the AddThis to change its placement with the image dynamically. I asked this in another question and through another forum I was able to get some help. Now AddThis and the image align properly and everything seems to be going in the right direction, however the image is no longer centered. I need this image to be centered on the page but I cannot figure out how to do this because I had to float the div containing the image and AddThis. Here is the HTML:
<div class="feature-container">
<div style="min-height:100px; min-width:100px; position:relative; float:left; ">
<div style="text-align:center;"><img class="feature-image"
src="/Images/test.jpg" width="300px;" alt="test" /></div>
<div style="position:absolute; bottom:0px; right:-40px;">
<div class="addthis_toolbox addthis_floating_style addthis_16x16_style">
<a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_email"></a>
<a class="addthis_button_compact"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/300
/addthis_widget.js"></script>
</div>
</div>
</div>
Any ideas how to center this? I can use a straight CSS solution or a solution using jQuery and CSS. Please provide examples.
Here is a JSFIDDLE of the page.
Here is a page that has the most up to date code I am attempting.
try this:
var pos = $('.center').width() - $('img').width();
$('.center').css('margin-left', pos);
http://jsfiddle.net/WY9YX/4/
I am not sure the content of your 'im-center', since I add an inline style（text-align:center;） as below, tested it and works fine on ie 8.
<div class="img-center" style="text-align:center;">
<img src="test.jpg" alt="test" />
</div>
Define a fixed width for center div would be OK, if this not requries a fixed width, #Raminson's jquery solution is better. I really want to know if we can implement this with pure css
<div id="top" class="wrap_fullwidth">
<div class="center" style="width:400px;">
<div style="min-height:100px; min-width:100px; position:relative; float:left; ">
<div style="text-align:center;"><img src="http://www.ubhape2.com/Images/test.jpg" alt="test" /></div>
<div style="position:absolute; bottom:0px; right:-40px;">
<div class="addthis_toolbox addthis_floating_style addthis_16x16_style">
<a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_email"></a>
<a class="addthis_button_compact"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js"></script>
</div>
</div>
</div>
</div>
Try to apply margin: 0 auto; CSS rule to the div.
Related
I am using bootstrap for the following mark-up and adding in my own classes of css where needed to style the pages how they are required
.sm-margin {
margin-top: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col">
<div class="thumbnail">
<a href="menu.php">
<img src="img/turkey.jpg" alt="Turkey dinners" style="width:100%">
<div class="caption text-center sm-margin">
<p><button type="button" class="btn btn-success">Check out our menu</button></p>
</div>
</a>
</div>
</div>
I am unclear to why the .sm-margin doesn't add the small margin at the top - see it in effect on my website here
The margin is added to the top of your button in the website
U can inspect and un check the checkbox of your class to see the difference if u use that css class or not...
My code was correct, it was a browser error. I cleared my cache on the Chrome browser and it corrected it.
Thanks all for input.
I'm using thumbnail from bootstrap and I want to make that when I click on that thumbnail to appear the picture with original sizes and when I click somewhere that picture with original sizes to disappear.
I hope you can understand me what I'm trying to explain..
This is an example of my thumbnail code
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>
...
</div>
Maybe you can try the CSS:onfocus.
a.thumbnail:focus > img.small {
visibility: hidden;
}
a.thumbnail:focus > img.large{
visibility: visible;
}
Html:
<a href="#" class="thumbnail" tabindex="0">
<img class="small" src="..." alt="..."></img>
<img class="large" src="..." alt="..."></img>
</a>
Note that tabindex="0" is necessary here to make <a> focusable.
What you want here is a modal plugin. Bootstrap has one, but it is not suitable for this kind of use.
You can find one implementation and examples of how to use it here: http://fancyapps.com/fancybox/
This may be overkill for your solution, but there are many alternatives to it.
The overview: I'm using Bootstrap 3 as my CSS Framework, thus the content is organized using its container/grid system. The background animation consists of blue/green diagonal strips that basically zig zag with each other. The animated background sequence is using two images that are repeated vertically. Currently the animation background images are in their own container/divs. Essentially I'm trying to fit a number of containers with the content above the background container.
My goal is to have the animated background responsive to device size but also able to have content anchored to specific places on the page background/animation. Eventually I would like to have additional events triggered according to the mouse's y-axis position.
Originally I thought I could have the background in its own container then have the containers/div's that contained the content set to a higher z-index so it would be positioned above the background animation. As you can see from looking at the jsfiddle I can't get the contents containers to be positioned above the background animation. It gets pushed to the bottom of the page.
I'm wondering if I need to make the background in its own non bootstrap div while only the contents use bootstrap? I could use width: 100% and height: 100% but then I I'm not sure if I would be able to anchor/fix certain content to specific points in the page.
I'm open to any and all suggestions. Simply put I want to have the contents position correctly over the animated background while also allowing the page to be responsive to device size.
<body>
<div class="container">
<div class="bluestrip">
<img src="http://i59.tinypic.com/rt0txj.jpg" />
</div>
<div class="greenstrip">
<img src="http://i57.tinypic.com/auv6fb.jpg" />
</div>
<div class="bluestrip extra">
<img src="http://i59.tinypic.com/rt0txj.jpg" />
</div>
<div class="greenstrip">
<img src="http://i57.tinypic.com/auv6fb.jpg" />
</div>
<div class="bluestrip extra">
<img src="http://i59.tinypic.com/rt0txj.jpg" />
</div>
<div class="greenstrip">
<img src="http://i57.tinypic.com/auv6fb.jpg" />
</div>
</div>
<div class='container zindex'>
<div class="row">
<div class='col-md-2'>
<img src="http://s26.postimg.org/8jazgghop/largest_iphone_3_of_3_14.gif">
</div>
<div class='col-md-2'>
<img src="http://s26.postimg.org/c46uzom89/medium_iphone_2_of_3_14.gif">
</div>
<div class='col-md-2'>
<img src="http://s26.postimg.org/c46uzom89/medium_iphone_2_of_3_14.gif">
</div>
</div>
</div>
</body>
http://jsfiddle.net/bismarck611/jt2k4o6z/
I was able to solve the problem with a few code changes. Never figured out if it was possible to have two containers stacked over each other with different z-index's.
<body>
<div class="background-content">
<div class="bluestrip">
<img src="http://i59.tinypic.com/rt0txj.jpg" />
</div>
<div class="greenstrip">
<img src="http://i57.tinypic.com/auv6fb.jpg" />
</div>
<div class="bluestrip extra">
<img src="http://i59.tinypic.com/rt0txj.jpg" />
</div>
<div class="greenstrip">
<img src="http://i57.tinypic.com/auv6fb.jpg" />
</div>
<div class="bluestrip extra">
<img src="http://i59.tinypic.com/rt0txj.jpg" />
</div>
<div class="greenstrip">
<img src="http://i57.tinypic.com/auv6fb.jpg" />
</div>
</div>
<div class='container zindex'>
<div class="row">
<div class='col-md-2'>
<img src="http://s26.postimg.org/8jazgghop/largest_iphone_3_of_3_14.gif">
</div>
<div class='col-md-2'>
<img src="http://s26.postimg.org/c46uzom89/medium_iphone_2_of_3_14.gif">
</div>
<div class='col-md-2'>
<img src="http://s26.postimg.org/c46uzom89/medium_iphone_2_of_3_14.gif">
</div>
</div>
</div>
</body>
The div that is holding the img's I changed the css class to the following:
.background-content {
position: absolute;
z-index: -1;
min-width: 100%;
min-height: 100%;
}
This allowed for the images to resize themselves according to screen size and fit below the page contents. Now I'm still able to use the bootstrap framework over my css animated background.
I've copied code from another page in my site that launches a video in a pop up window, but for some reason the code does not bring up the video on the new page.
However, I've taken the exact same code (except I cannot apply it to a DIV this time) and applied it to the P element, but it does not launch the video.
Here's my code:
<p onclick="javascript:launchActivity('C191D24F-9B1A-FB59-C4EE7E3257C019F4','video')" style="cursor:pointer;"><img class="top" src="/resource/uploads/left-navs/blue-camera.png" />
some text</p>
and I've taken it from the WORKING code:
<div onclick="javascript:launchActivity('C191D24F-9B1A-FB59-C4EE7E3257C019F4','video')" style="cursor:pointer;display:inline-block; margin-top:10px;">
<i>vid text launch<img border="0" src="/resource/uploads/PrebuildSNLO/text_arrow.png" style="padding-left: 3px;" /></div>
Thanks for taking a look.
The launchActivity function is using jQuery to search for an element on the page, which doesn't exist. There is an element on the old page with this id
C191D24F-9B1A-FB59-C4EE7E3257C019F4
I assume this is the video, so it will need copying to the new page.
<div class="videoPlayer" id="C191D24F-9B1A-FB59-C4EE7E3257C019F4" title="SN1 Common Core" video="http://d1by67ljd45m4v.cloudfront.net/media/C1920522-F3C9-DB50-3F3D3CC1CACC01B7.mov" videoendredirect="">
<div class="ui-dialog-content ui-widget-content">
<div style="background-color:white;">
<strong>Problem loading video..</strong></div>
</div>
</div>
I'm guessing you didn't copy this into your new page, from the original page:
<div videoendredirect="" video="http://d1by67ljd45m4v.cloudfront.net/media/C1920522-F3C9-DB50-3F3D3CC1CACC01B7.mov" id="C191D24F-9B1A-FB59-C4EE7E3257C019F4" class="ui-dialog ui-widget ui-corner-all ui-draggable ui-resizable videoPlayer" style="display: none; width: auto; min-height: 0px; height: 491.267px; visibility: hidden;" scrolltop="0" scrollleft="0" title="SN1 Common Core">
<div class="ui-dialog-content ui-widget-content">
<div style="background-color:white;">
<strong>Problem loading video..</strong></div>
</div>
</div>
The script you're trying to call is looking for an object with the ID of C191D24F-9B1A-FB59-C4EE7E3257C019F4. When it can't find it, it fails.
I working on a phone app for a local Telecommunications business using HTML, CSS, Javascript and compiling it with Phone Gap. Currently, I've run into a problem with the sizing of the Divs using the IDangerous Swiper CSS. As I load the page, the Div shows a size of 0px x 0px, but is set for 100% width and height. It will only load after reloading the page.
<div data-role="content">
<div class="swiper-container-third center";>
<div class="swiper-wrapper center";>
<!--First Slide-->
<div class="swiper-slide center">
<img class="dealsCenter" src="http://web.duo-county.com/images/app_promos/sidebar-brandpromo.jpg"/>
</div>
<!--Second Slide-->
<div class="swiper-slide center">
<img class="dealsCenter" src="http://web.duo-county.com/images/app_promos/sidebar-monthly-broadband.jpg"/>
</div>
<!--Third Slide-->
<div class="swiper-slide center">
<img class="dealsCenter" src="http://web.duo-county.com/images/app_promos/sidebar-monthly-video.jpg"/>
</div>
</div>
</div>
The class "center" is just CSS that says text-align: center !important;
I just need help with figuring what it could be that would cause the Div "swiper-container-third" to equal 1319px x 0px and the "swiper-wrapper" to equal 0px x 0px. Any help would be highly appreciated!
I have used this plugin in my currently project intensively. Here are few reasons:
.swiper-container-third and .swiper-slide does not have height
specified in CSS. You must have to. Both has to have width and
height equal.
Did you miss CSS given by IDangerous?