Search Results

Search found 1146 results on 46 pages for 'divs'.

Page 20/46 | < Previous Page | 16 17 18 19 20 21 22 23 24 25 26 27  | Next Page >

  • jQuery slideDown + CSS Floats

    - by danilo
    I'm using a HTML Table with several rows. Every second row - containing details about the preceding row - is hidden using CSS. When clicking the first row, the second row gets showed using jQuery show(). This is quite nice, but I would prefer the slideDown-Effect. The problem is, inside the details row, there are two floating DIVs, one floating on the left, and one on the right. Now if i slideDown the previously hidden row, the contained DIVs behave strange and "jump around". See this animated gif to understand what I mean: http://ich-wars-nicht.ch/tmp/lunapic_127365879362365_.gif The markup: <tr class="row-vm"> <td>...</td> ... </tr> <tr class="row-details"> <td colspan="8"> <div class="vmdetail-left"> ... </div> <div class="vmdetail-right"> ... </div> </td> </tr> The CSS: .table-vmlist tr.row-details { display: none; } div.vmdetail-left { float: left; width: 50%; } div.vmdetail-right { float: right; width: 50%; } And the jQuery code: if ($(this).next().css('display') == 'none') { // Show details //$(this).next().show(); $(this).next().slideDown(); } else { // Hide details //$(this).next().hide(); $(this).next().slideUp(); } Is there a way to fix this behavior, and to implement a nice slideDown-effect?

    Read the article

  • Location of Embedly (JQuery-Preview) Results

    - by user749798
    Embedly/Jquery-Preview has been fantastic. However, I'm trying to change the location of the preview result, and having trouble. Right now, the result appears right below the input field...but I'd rather have it in a separate part of the page. Is there a way to do this? I've tried changing the location of the selector and loading divs, but that hasn't helped. It seems to ignore those divs and put it right below the submit button. Below is my code: <form accept-charset="UTF-8" action="private" class="new_comment" data-remote="true" id="new_comment" method="post"> <input class="photo_comm" id="comment_comment" name="comment[comment]" placeholder="add a comment or link..." size="30" type="text" /><span type="text" id="counter">1000</span> <input class="btn btn-primary btn-mini" data-disable-with="Submitting..." name="commit" type="submit" value="Post" /> </form> <!-- Placeholder that tells Preview where to put the loading icon--> <div class="loading"> <img src='http://embedly.github.com/jquery-preview/images/loading-rectangle.gif'> </div> <!-- Placeholder that tells Preview where to put the selector--> <div class="selector"></div> $('#comment_comment').preview({ key:'60f1dcdf3258476794784148a6eb65e7', // Sign up for a key: http://embed.ly/pricing selector : {type:'rich'}, preview : { submit : function(e, data){ e.preventDefault(); $.ajax({ dataType: 'script', url: this.form.attr('action'), type: 'POST', data: data }); }, }, autoplay : 0, maxwidth : 400, display : {display : 'rich'} });

    Read the article

  • Is there a way to have the equivalent of multiple :before and :after pseudo-elements in CSS?

    - by Sergey Basharov
    Currently I have this markup that represents an icon container and some elements styled with CSS inside it that in the end show as graphic icon. <div class="icon"> <div class="icon-element1"></div> <div class="icon-element2"></div> <div class="icon-element3"></div> </div> The number of the child elements can be different depending on the complexity of the icon. What I want is to somehow move as much as possible to CSS stylesheet, so that ideally I would have only <div class="icon"></div> and the rest would just render from CSS styles, something close in concept to :before/:after, a kind of virtual divs. I don't want to use JavaScript to add the elements dynamically. It would be possible to do this if we had multiple :before/:after. Here is an example of an icon I get by using the markup from above: As you can see, there are 3 child elements representing gray case, white screen and turquoise button. Please advise, how I can simplify this markup so that not to have to put all the divs each time I want this icon to be shown.

    Read the article

  • The Impossible Layout?

    - by Kyle K
    I'm beginning to think this is impossible, but thought I'd ask you guys. Basically it's a 2 column layout, but the "business" wants the following: -Always take up the entire browser window -Accommodate resizing of browser window -Left column will be fixed width, but that width should be flexible from page-to-page. -Left column has a region at the top with fixed height. -Left column has a bottom region. It should take up the remaining vertical space of browser window. If content is very large, it will have a scroll bar just for that region. -Right column should take up remaining horizontal space of browser window. -Right column has a region at the top with fixed height. -Right column has a bottom region. It should take up the remaining vertical space of browser window. If content is very large, it will have a scroll bar just for that region. I've tried everything...divs, floated, absolutely positioned, tables, divs in tables... Is this even possible? Here's an image of what it should look like: http://imgur.com/zk1jP.png

    Read the article

  • CSS:Hover's problem with text that is hidden because of overflow:hidden ?

    - by Michael Harringon
    In my application i have lots of divs containing text. All divs have overflow set to hidden so that the user does not see the text if the container is not large enough to contain the writing. If the user wants to see the hidden text they are supposed to mouse over the "box". The box then expands and shows the text. Sounds simple enough, right? Well i am having problems and the solution i tried did not work. The problem is that when the user mouses over the box, the text does indeed appears but stays really narrow and comes out of the bottom box, the sameway it would if overflow was set to visible. below is the standard css applied to the div box: .newevent { overflow: hidden; z-index: 0; } I Tried to fix this by setting a hover trigger, when it is activated the box widens, i thought that this would then mean there would be more space to display the text, below is the hover effect: .newevent div:hover { width: 200px; padding: 50px; background-color:#D4D4D4; border: medium red dashed; overflow: visible; z-index: 1; } How do i go about "redrawing" the text when it is hovered over, so that the text can use the new widened area rather than behaving as it is still in a narrow box.

    Read the article

  • Manipulating original elements with qTip

    - by pjotr
    I have a bunch of divs on my page and each of them has only the class attribute. In the divs there are some spans, which are set up to display a tooltip with the help of qTip. The tooltip should contain three items: Up: anchor, which should move the OuterDiv up (probably something like this: move up/down in jquery) Down: anchor, which should move the OuterDiv down Delete: anchor, which should remove the calling OuterDiv My code so far: <body> <div class="OuterDiv"> <div class="InnerDiv"> <span class="Position">Position 1</span> </div> </div> <div class="OuterDiv"> <div class="InnerDiv"> <span class="Position">Position 2</span> </div> </div> </body> And scripts: $(document).ready(function () { var qTipContent = '<a href="javascript:void(0)" onclick="">&uarr;</a>&nbsp;&nbsp;&nbsp;'; qTipContent = qTipContent + '<a href="javascript:void(0)" onclick="">&darr;</a>&nbsp;&nbsp;&nbsp;'; qTipContent = qTipContent + '<a href="javascript:void(0)" onclick="">X</a>'; $('.Position').each(function () { $(this).qtip({ content: qTipContent, hide: { fixed: true } }) }); }); How should the onclick function in the qTip content look like?

    Read the article

  • Cannot Resize DIV to anything smaller than maximum width

    - by MxmastaMills
    Quick CSS Question. I cannot seem to figure out a very simple CSS/HTML problem. Here's a JSFiddle. http://jsfiddle.net/BmM6t/ Basically, these two divs are not resizing to anything less than 100% width: <div id="main_pic" class="main_div"> THIS IS WHERE THE MAIN PIC WILL GO. </div> <div id="signin" class="main_div"> SIGN IN TO THE SITE! <form> <label for="name">EMAIL/USERNAME:</label> <input type="text" name="name" id="name"> <label for="email">PASSWORD:</label> <input type="text" name="email" id="email"> <br /> <input type="submit" value="Let's Play!"> </form> </div> You'll see that the two divs with class main_div actually take up the entire width of the screen for some reason (you can see that if you inspect the element) even though their widths are clearly written. When you try to change the width of one of the main_div's it changes the width but if you inspect the element, it just changes the width of the object and adds padding around it to make sure it still takes up the entire width of the screen. I'm sure it's some little error I've made but I can't find it. Thanks for the help!

    Read the article

  • XSLT apply attribute depending on position

    - by Burt
    I am using XSLT for a website based on the 960 grid css framework. I have columns of divs that span across the page if it is the first div in a row it should have a class first applied, if it is the middle one then no class and if it is the 3rd in the row it should have the class last applied. I am really scratching my head as the best way to go about this any help is appreciated. Below is the structure I want to end up with, the numbers inside the divs represent the position. <div class="container_12"> <div id="main-content" class="alpha grid_12" style="margin-bottom: 20px;"> <div class="grid_4 alpha"> 1 </div> <div class="grid_4 "> 2 </div> <div class="grid_4 omega"> 3 </div> <div class="grid_4 alpha"> 4 </div> </div> </div>

    Read the article

  • Simple javascript/jquery append, remove question

    - by Scarface
    Hey guys, quick question. I have a div that on click will execute a jquery function onclick, and then replace the div with its opposite div which onclick will replace back to the first div just like the favorite function on this site. I am having a simple problem I hope someone can spot or explain to me it is not possible. The function works with the initial two divs that are served directly, but when I click on either of the original two divs, and the function executes and replaces the div with the corresponding div the replacement div does not execute the function. I have to refresh the page to get the original div, which is identical to execute the function. Is the div actually replaced on the page with append, or does it just visually show it? Any advice appreciated. original div <div class="unfavorite"><img id="unfavorite_img" src="images/favorite2.png" /></div> javascript div replacement $(".favorite").remove(); $(".favoriteholder").append('<div class="unfavorite"><img id="unfavorite_img" src="images/favorite2.png" /></div>');

    Read the article

  • How to determine which element(s) are visible in an overflowed <div>

    - by jjross
    Basically, I'm trying to implement a system that behaves similar to the reading pane that's built into the Google Reader interface. If you haven't seen it, Google Reader presents each article in a separate box and as you scroll it highlights the current box (and marks the article as read). In addition to this, you can move forward or backward in the article list by clicking the previous and next buttons in the UI. I've basically figured out how to do most of the functionality. However, I'm not sure how I can determine which of my divs is currently visible in in the scrollable pane. I have a div that is set to overflow:auto. Inside of this div, there are other divs, each one containing a piece of content. I've used the following jquery plugin to make everything scroll based on a click of the "next" or "previous" button and it works like a charm: http://demos.flesler.com/jquery/serialScroll/ But I can't tell which div has "focus" in the scrollable pane. I'd like to be able to do this for two reasons. I'd like to highlight the item that the user is currently reading (similar to Google Reader). I need to do this regardless of whether or not they used the plugin to get there or used the browser's scroll bar. I need to be able to tell the plugin which item has focus so that my call to scroll to the "next" pane actually uses the currently viewed pane (and not just the previous pane that the plugin scrolled from). I've tried doing some searching but I can't seem to figure out a way to do this. I found lots of ways to scroll to a particular item, but I can't find a way to determine which element is visible in an overflowed div. If I can determine which items are visible, I can (probably) figure out the rest. I'm using jquery if that helps. Thanks!

    Read the article

  • CSS: auto height on containing div, 100% height on background div inside containing div.

    - by user47831
    The problem, is that I have a content div which stretches its container height-wise (container and content div have auto height). I want the background container, which is a sister div of the content div to stretch to fill the container. The background container contains divs to break the background into chunks. The background and container divs have 100% width, the content container doesn't. HTML: <div id="container"> <div id="content"> Some long content here .. </div> <div id="backgroundContainer"> <div id="someDivToShowABackground"/> <div id="someDivToShowAnotherBackground"/> </div> </div> CSS: #container { height:auto; width:100%; } #content { height: auto; width:500px; margin-left:auto; margin-right:auto; } #backgroundContainer { height:100%;??? I want this to be the same height as container, but 100% makes it the height of the viewport. }`

    Read the article

  • CSS: auto height on containing div, 100% height on background div inside containing div.

    - by user47831
    The problem, is that I have a content div which stretches its container height-wise (container and content div have auto height). I want the background container, which is a sister div of the content div to stretch to fill the container. The background container contains divs to break the background into chunks. The background and container divs have 100% width, the content container doesn't. HTML: <div id="container"> <div id="content"> Some long content here .. </div> <div id="backgroundContainer"> <div id="someDivToShowABackground"/> <div id="someDivToShowAnotherBackground"/> </div> </div> CSS: container ` container { height:auto; width:100%; } content { height: auto; width:500px; margin-left:auto; margin-right:auto; } backgroundContainer { height:100%;??? I want this to be the same height as container, but 100% makes it the height of the viewport. }`

    Read the article

  • CSS content overflowing containing div

    - by kaese
    Hi, Currently have a problem with some DIVs overlapping their containing DIVs. See image below (the 3 products at the bottom): All the body content of the page is held within the #content DIV: div#content { width: 960px; float: left; background-image: url("../img/contentBg.png"); background-repeat: repeat; margin-top: 10px; line-height: 1.8em; border-top: 8px solid #5E88A2; padding: 10px 15px 10px 15px; } And here is the CSS for the product boxes within the #content div: .upper { text-transform: uppercase; } .center { text-align: center; } div#products { float: left; width: 100%; margin-bottom: 25px; } div.productContainer { float: left; width: 265px; font-size: 1em; margin-left: 50px; height: 200px; padding-top: 25px; text-align: right; } div.product { float: left; width: 200px; } div.product p { } div.product a { display: block; } div.product img { float: left; } div.product img:hover { opacity: 0.8; filter: alpha(opacity = 80); } div.transparent { opacity: 0.8; filter: alpha(opacity = 80); } And here is the HTML for the boxes: <div class="productContainer"> <div class="product"> <h2 class="upper center">A2 Print</h2> <a href='../edit/?productId=5&amp;align=v' class='upper'> <img src="../../wflow/tmp/133703b808c91b8ec7e7c7cdf19320b7A2-Print.png" alt="Representation of image printed at A2 Print through MyPersonalPoster." /></a> <p class="upper">16.5 inches x 23.4 inches<br /><strong>&pound;15.99</strong></p> <p class="upper smaller"><em><span><span class="yes">Yes</span> - your picture quality is high enough for this size</span> </em></p> <p><a href='../edit/?productId=5&amp;align=v' class='upper'><span>Select</span></a></p> </div> </div> <div class="productContainer"> <div class="product transparent"> <h2 class="upper center">A1 Print</h2> <a href='../edit/?productId=11&amp;align=v' class='upper'> <img src="../../wflow/tmp/133703b808c91b8ec7e7c7cdf19320b7A1-Print.png" alt="Representation of image printed at A1 Print through MyPersonalPoster." /></a> <p class="upper">23.4 inches x 33.1 inches<br /><strong>&pound;19.99</strong></p> <p class="upper smaller"><em><span><span class="no">Warning</span> - your picture quality may not be sufficient for this size</span> </em></p> <p><a href='../edit/?productId=11&amp;align=v' class='upper'><span>Select</span></a></p> </div> </div> <div class="productContainer"> <div class="product transparent"> <h2 class="upper center">Poster Print (60cm x 80cm)</h2> <a href='../edit/?productId=12&amp;align=v' class='upper'> <img src="../../wflow/tmp/133703b808c91b8ec7e7c7cdf19320b7Poster-Print-(60cm-x-80cm).png" alt="Representation of image printed at Poster Print (60cm x 80cm) through MyPersonalPoster." /></a> <p class="upper">23.6 inches x 31.5 inches<br /><strong>&pound;13.95</strong></p> <p class="upper smaller"><em><span><span class="no">Warning</span> - your picture quality may not be sufficient for this size</span> </em></p> <p><a href='../edit/?productId=12&amp;align=v' class='upper'><span>Select</span></a></p> </div> </div> Any idea what could be causing these DIVs to overlap? What I'd like is for all the boxes to fit within the #container div as expected. It's driving me crazy! Cheers

    Read the article

  • js code works for one variable(?), how to make it work for many?

    - by jerry87
    I have working code of js, it shows different div for selected option. <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#box1').hide(); $('#box2').hide(); $('#box3').hide(); $("#thechoices").change(function(){ $("#" + this.value).show().siblings().hide(); }); $("#thechoices").change(); }); </script> </head> <body> <select id="thechoices"> <option value="box1">Box 1</option> <option value="box2">Box 2</option> <option value="box3">Box 3</option> </select> <!-- the DIVs --> <div id="boxes"> <div id="box1"><p>Box 1 stuff...</p></div> <div id="box2"><p>Box 2 stuff...</p></div> <div id="box3"><p>Box 3 stuff...</p></div> </div> </body> </html> Please, I have no js experience, so I don't know how to make it work several times on one page for many "thechoices". Something like copy paste but more suitable than this: <script type="text/javascript"> $(document).ready(function(){ $('#box1').hide(); $('#box2').hide(); $('#box3').hide(); $('#box4').hide(); $('#box5').hide(); $('#box6').hide(); $("#thechoices").change(function(){ $("#" + this.value).show().siblings().hide(); }); $("#thechoices2").change(function(){ $("#" + this.value).show().siblings().hide(); }); $("#thechoices").change(); }); $("#thechoices2").change(); }); </script> </head> <body> <select id="thechoices"> <option value="box1">Box 1</option> <option value="box2">Box 2</option> <option value="box3">Box 3</option> </select> <!-- the DIVs --> <div id="boxes"> <div id="box1"><p>Box 1 stuff...</p></div> <div id="box2"><p>Box 2 stuff...</p></div> <div id="box3"><p>Box 3 stuff...</p></div> </div> <select id="thechoices2"> <option value="box4">1</option> <option value="box5">2</option> <option value="box6">3</option> </select> <!-- the DIVs --> <div id="boxes"> <div id="box4"><p>1 stuff...</p></div> <div id="box5"><p>2 stuff...</p></div> <div id="box6"><p>3 stuff...</p></div> </div> I know you can help me, it seems to be simple but I can't handle with this. How can I change my second code to work in the same way but not only for two selectors. I need it for many. Don't want to copy paste the same section like in my second code.

    Read the article

  • JavaScript JSON Error While Tabbing in ASP.NET MVC

    - by MightyZot
    Originally posted on: http://geekswithblogs.net/MightyZot/archive/2013/11/11/javascript-json-error-while-tabbing-in-asp.net-mvc.aspxI sometimes don’t care about validation for a specific control. The RememberMe control in the login form, for example, really doesn’t need validation, so I forget to include the Html.ValidationMessageFor helper line for that control in particular. As a result, when I’m debugging using IE, I get a silly JSON parsing exception when changing focus from one field to another. The exception doesn’t hurt anything, as far as I know, but it’s just plain annoying. If you’re getting this error, and you don’t want validation messages showing up for controls on a form, you can put them in div tags and set the display style on the divs to none. When I have a handful of controls that I don’t want the validation messages for, I just throw them all in the same div and hide it.

    Read the article

  • Bootstrap 3.0.0: How to use data-slide-to outside of indicators?

    - by Griffin
    I am attempting to make a small gallery like the one shown below - I'm sure you've all seen them considering they are fairly common. When trying to make one using bootstrap I ran into a major problem. I can't seem to link the smaller bottom images to the larger top one that was when one of the smaller ones is clicked it changes to the selected image. I am attempting to use data-slide-to however it does not seem to work outside of the "carousel-indicators". I can't put it into the carousel indicators list because that moves the images up into the gallery (It may be possible to fix this with CSS but my attempts have been worthless). Does anyone know the problem? I've tried tags around each image that didn't seem to work then I tried divs. Still nothing. Things to note: I am using 3.0.0 All images are generated (if you haven't guessed already) Smaller images are separate from larger one (not auto scaled down)

    Read the article

  • pop up html as javascript string instead of hidden div for seo [closed]

    - by user1324762
    Possible Duplicate: How bad is it to use display: none in CSS? I have heard that using display:none or visibility:hidden css properties are not a very good idea for seo purposes. I have about 4 different pop up windows to display and each one has about 20 words inside it. I can create hidden divs. Another option is to store div html elements as javascript string. In this way pop up html elements will be generated from javascript string. This will be still faster than using ajax since the data is static. Is this method absolutely safe for SEO? P.S.: I was just asking about similar question on http://stackoverflow.com/questions/12389075/storing-data-in-javascript-array-for-further-use, but this one is different, it is about static data and about SEO.

    Read the article

  • Styling ASP.NET MVC Error Messages

    - by MightyZot
    Originally posted on: http://geekswithblogs.net/MightyZot/archive/2013/11/11/styling-asp.net-mvc-error-messages.aspxOff the cuff, it may look like you’re stuck with the presentation of your error messages (model errors) in ASP.NET MVC. That’s not the case, though. You actually have quite a number of options with regard to styling those boogers. Like many of the helpers in MVC, the Html.ValidationMessageFor helper has multiple prototypes. One of those prototypes lets you pass a dictionary, or anonymous object, representing attribute values for the resulting markup. @Html.ValidationMessageFor( m => Model.Whatever, null, new { @class = “my-error” }) By passing the htmlAttributes parameter, which is the last parameter in the call to the prototype of Html.ValidationMessageFor shown above, I can style the resulting markup by associating styles to the my-error css class.  When you run your MVC project and view the source, you’ll notice that MVC adds the class field-validation-valid or field-validation-error to a span created by the helper. You could actually just style those classes instead of adding your own…it’s really up to you. Now, what if you wanted to move that error message around? Maybe you want to put that error message in a box or a callout. How do you do that? When I first started using MVC, it didn’t occur to me that the Html.ValidationMessageFor helper just spits out a little bit of markup. I wanted to put the error messages in boxes with white backgrounds, our site originally had a black background, and show a little nib on the side to make them look like callouts or conversation bubbles. Not realizing how much freedom there is in the styling and markup, and after reading someone else’s post, I created my own version of the ValidationMessageFor helper that took out the span and replaced it with divs. I styled the divs to produce the effect of a popup box and had a lot of trouble with sizing and such. That’s a really silly and unnecessary way to solve this problem. If you want to move your error messages around, all you have to do is move the helper. MVC doesn’t appear to care where you put it, which makes total sense when you think about it. Html.ValidationMessageFor is just spitting out a little markup using a little bit of reflection on the name you’re passing it. All you’ve got to do to style it the way you want it is to put it in whatever markup you desire. Take a look at this, for example… <div class=”my-anchor”>@Html.ValidationMessageFor( m => Model.Whatever )</div> @Html.TextBoxFor(m => Model.Whatever) Now, given that bit of HTML, consider the following CSS… <style> .my-anchor { position:relative; } .field-validation-error {    background-color:white;    border-radius:4px;    border: solid 1px #333;    display: block;    position: absolute;    top:0; right:0; left:0;    text-align:right; } </style> The my-anchor class establishes an anchor for the absolutely positioned error message. Now you can move the error message wherever you want it relative to the anchor. Using css3, there are some other tricks. For example, you can use the :not(:empty) selector to select the span and apply styles based upon whether or not the span has text in it. Keep it simple, though. Moving your elements around using absolute positioning may cause you issues on devices with screens smaller than your standard laptop or PC. While looking for something else recently, I saw someone asking how to style the output for Html.ValidationSummary.  Html.ValidationSummery is the helper that will spit out a list of property errors, general model errors, or both. Html.ValidationSummary spits out fairly simple markup as well, so you can use the techniques described above with it also. The resulting markup is a <ul><li></li></ul> unordered list of error messages that carries the class validation-summary-errors In the forum question, the user was asking how to hide the error summary when there are no errors. Their errors were in a red box and they didn’t want to show an empty red box when there aren’t any errors. Obviously, you can use the css3 selectors to apply different styles to the list when it’s empty and when it’s not empty; however, that’s not support in all browsers. Well, it just so happens that the unordered list carries the style validation-summary-valid when the list is empty. While the div rendered by the Html.ValidationSummary helper renders a visible div, containing one invisible listitem, you can always just style the whole div with “display:none” when the validation-summary-valid class is applied and make it visible when the validation-summary-errors class is applied. Or, if you don’t like that solution, which I like quite well, you can also check the model state for errors with something like this… int errors = ViewData.ModelState.Sum(ms => ms.Value.Errors.Count); That’ll give you a count of the errors that have been added to ModelState. You can check that and conditionally include markup in your page if you want to. The choice is yours. Obviously, doing most everything you can with styles increases the flexibility of the presentation of your solution, so I recommend going that route when you can. That picture of the fat guy jumping has nothing to do with the article. That’s just a picture of me on the roof and I thought it was funny. Doesn’t every post need a picture?

    Read the article

  • Redisigning an old site, structure change etc

    - by RhymeGuy
    I have an old site built in 2006, it has around 200 pages and 500 pictures. Every single page is of course indexed as well as images. It is very well ranked for targeted keywords and I receive good amount of SEO traffic (I guess that's due the various campaigns, branding, ppc, etc..) Problem: Site has outdated design, pages and images have not so proper names, there are no heading and alt tags, it was built in tables, inline CSS etc.. Goal: Complete redisign site, use divs, change file names, add proper meta data, alt tags etc.. Question: How this can affect current SEO positions? I will redirect (301) every single page to the new one, build site map, but what to do with images? Do I need to redirect them also? Any other suggestion?

    Read the article

  • Javascript slider with fade

    - by tarmes
    I've been scouring the web for a slider that offers a particular effect, but I can't find one. I'm hoping that someone here will be able to help out... Specifically, I need a slider that will slide left and right through a series of HTML DIVs. However, I also need the old slide to fade out as it slides. This is because I don't what to have a visible frame around the the slider, so I don't want the old slide to be cropped against an invisible edge. It's hard to explain in words, so here's a graphic. In each case the green slide is entering the view, the red one is existing. Is possible, I'd like the slide to use CSS3 transitions where available for the smoothest possible effect. Has only ever come across such a beast?

    Read the article

  • Will I get penalised by google for overflow hidden? [duplicate]

    - by Rascal Capac
    This question already has an answer here: How bad is it to use display: none in CSS? 5 answers I have 2 divs next to each other, div A and div B. Div A displays a whole wordpress post and div B displays about 15 excerpts of posts with the same tag. To get this looking nice I set the hight of div B to be the same as the hight of div A with javaScript. This means alot of post excerpts will be hidden due to overflow hidden on div B. Will Google penalise me for this, and if so, how can I make this work and still please Google? Ps. I would gladly prevent the excerpts from being indexed but the main post must be indexed Ds.

    Read the article

  • Z-index preventing on hover attribute on another element [migrated]

    - by user18294
    I have two different elements (div class="") within a larger container. Let's call them div class="overlay_container" and div class="title." The div class="overlay_container" has a subclass, .image, which creates an overlay over the entire larger container on hover. The div class="title" has a z-index of 10,000 and lies over .image and therefore over the overlay. Unfortunately, when you hover over "title," the subclass overlay image underneath disappears. I know the problem is obviously that the "title" div is right over the other divs and therefore the on hover will disappear due to the z-index. But how do I fix this? How do I make it so that when you hover over the "title," the .image overlay still appears? If your answer involves jQuery, could you please tell me where to put the script (before the /head tag)? Thanks!

    Read the article

  • Two HTML elements with same id attribute: How bad is it really?

    - by danludwig
    Just browsing the google maps source code. In their header, they have 2 divs with id="search" one contains the other, and also has jstrack="1" attribute. There is a form separating them like so: <div id="search" jstrack="1"> <form action="/maps" id="...rest isn't important"> ... <div id="search">... Since this is google, I'm assuming it's not a mistake. So how bad can it really be to violate this rule? As long as you are careful in your css and dom selection, why not reuse id's like classes? Does anyone do this on purpose, and if so, why?

    Read the article

  • How to troubleshoot rendering differences between Chrome/IE and Firefox? [on hold]

    - by user32548
    I have a personal website and just realized that the display is very different between Firefox (tested 19.0.2 and 25) and Chrome 30.0.1599.101 m Firefox display (this is how I intended it to look. In Chrome & IE9.0 the DIVs all seem to stagger on their own..... ? Im just an amateur and this is my personal blog for fun, Ive never had to troubleshoot a rendering issue like this one. Not sure how to go about doing it? Can Firebug help with determining where layout is inherited from? I have sample HTML if needed but didn't want to cloud up the questions a wall of text.

    Read the article

  • How do I work around an HTML Table rendering bug in IE 7?

    - by osmaniac
    I have a table. Some cells span multiple columns. Some cells span multiple rows and columns. But one row (which spans all columns but the rightmost one) creates an artifact. Part of the text in the cell is erroneously repeated left justified on a new row just below the table. I'm baffled. I tried rendering with and without "table-layout: fixed;". Same result. When I originally composed the design using just HTML and CSS, it looked great. But then I worked it into a page and had to add more columns to my master table the right to hold buttons. These buttons are in three groups, each having their own div to control floating and rewrapping when the window gets narrower. One div has another table inside it that groups a single row of buttons. Thus I have table inside div inside td inside outer table. I would prefer a simpler design, but how? This is what I want to have: ................................................................................... . . . . Four rows of data . Three groups of buttons that can reflow . . With several columns . if window gets narrower . . meticulously layed out, . . . That should not resize . . . when window gets narrower . . ................................................................................... . One more row of data spanning the whole screen which stays below the buttons . ................................................................................... What I was doing was putting the three divs with the buttons in the upper right in a single cell that spanned four rows. What other opportunities does CSS offer? The buttons are not allowed to overlap the data on the left or go past the data line below. The original design had the divs with the buttons NOT in a table with the data, but when the window gets narrow, some of the buttons flow such that they go underneath the data, which looks bad. I would post actual HTML, except it is generated by ASP, huge, with lots of CSS styling, and the feature that lets me view the final HTML is not working at the moment. (Built in security in the application.)

    Read the article

< Previous Page | 16 17 18 19 20 21 22 23 24 25 26 27  | Next Page >