I have 3 divs parallel to each other holding some information. I want three new divs, in the same position as the previous ones (refer image), take the position of the last ones while pushing the same downwards.
I want this action to happen dynamically i.e. when someone enters information on the back-end module, the more recent information takes place of the older one.
I am pretty new to Ajax and jQuery but I am sure this is the way to go. Can someone please direct me to a suitable direction?
Image: http://img12.imageshack.us/img12/4149/us56.jpg
You are right, Ajax and jQuery can be the way to go.
Simplest solution is probably to put the three blocks into one div and call
$("#parent-div").prepend();
on it. You can arrange the blocks how you want using CSS
<div id='parent-div'>
<div class="col left">Hello World</div>
<div class="col">Hello World</div>
<div class="col">Hello World</div>
</div>
Tried it out on jsFiddle, just have a look.
http://api.jquery.com/insertBefore/
example:
$('<div>new div</div>').insertBefore('#divName');
Related
I'm working on a news publishing site that needs to load in stories from an RSS feed below the current news page. I've been using InfiniteAjaxScroll (http://infiniteajaxscroll.com/) to some success however, I've hit a brick wall. There is not way for me to dynamically change what story should load in next as you scroll down the page.
Does anyone know of any other plugins, tutorials, examples that replicate behavior like this. I've searched but come up with nothing that meets these requirements.
I'm trying to create something similar to what the Daily Beast has implemented on their site.
http://www.thedailybeast.com/articles/2014/11/05/inside-the-democrats-godawful-midterm-election-wipeout.html
How do they know what stories to load in?
Thanks!
If you're using the InfiniteAjaxScroll library, the "next story" is whatever link you define as the next URL which can be dynamic for each story you load.
Imagine your first story's HTML as something like this
<div class="stories">
<div class="story">
...
</div>
</div>
<div id="pagination">
next
</div>
Then in the storyC.html you have
...
<div id="pagination">
next
</div>
Assuming you're using some sort of dynamic backend, you would use some sort logic to grab a related story and just set that URL as the "next" URL.
This is my first post here.
I was wondering whether you could suggest to me how to make the footer in this image:
http://i5.minus.com/ik0O1e7e2qWQd.jpg
So far I have this: http://www.seann.biz/testflight But I can't quite get the footer right. I am using bootstrap by the way.
As you can see there are two columns of the same width but of varying colour and I would love to get these two sorted first then the rest to follow later.
This is the first full website I have coded so sorry if its a bit messy
you can use css width:50% then float:left, add it at the end
Something like this:
<div id="footer" style="width:100%;height:300px">
<div id="footerleft" style="width:50%;height:300px;background-color:#000;float: left;"></div>
<div id="footerright" style="width:50%;height:300px;background-color:#ccc;float: left;"></div>
</div>
hope this helps
EDIT
check this fiddle http://jsfiddle.net/X4tdz/
Add the following css to the image
position:absolute
left:50%
top:50%
margin-left:-50px // half of the image width
margin-top:-50px // half of the image height
Make sure the parent div of the image is set to position:relative
PS: If you have any NEW questions make a new question about it so that others can also contribute.
I want the header and the main image on a page to stay connected to each other so that when the picture resizes it doesn't become too far off from the header.
But whenever I try to look up the answer, the word "fix" throws off the whole search.
Basically I have two images with divs as containers but I don't know the key words to make them stay/move together.
Try simply wrapping them inside an extra div:
<div id="Wrapper">
<div id="Header">Header Text Here </div>
<div id="Image"><!--- Image Tag here ---> </div>
</div>
Within my custom cell there are 2 span-elements.
<span class="FormElement">
<span class="customelement" id="code" name="code">BER01_CN_045_002</span>
</span>
Is there a way to avoid this?
See the demo, I am talking about cell "code".
I think, that you should don't spend your time in such kind of code optimization. Like I tried to explain in my previous answer the first <span> will be inserted by jqGrid for all form elements having the option edittype:'custom'. The second <span> you inserted yourself in the code of your custom formatter. It is permitted to have nested <span> elements like to have nested <div> elements. I recommend you better to follows the jqGrid standard code as trying to make any kind of optimization which nobody will see at the end except you.
Moreover if you look more in the HTML code of your page generated by jqGrid you will see that the form itself (the form with id="FrmGrid_grid" in your example) are placed inside of <span>. In the same way in the code of the column headers you will also find <span class="s-ico"> which has another two <span> elements as the children. Would you like to try to "optimize" also the code? So I repeat my advice just to hold jqGrid standards and not trying to optimize such small pieces of code like nested <span> elements.
I've got a simple one but haven't been able to find an example of a solution that fits exactly what I'm asking. Sorry in advance if this is a repeat.
From my navigation menu, I want each link to reference a specific DIV in a separate page and then pull that DIV and replace the content in the current page.
<ul>
<li>About</li>
<li>Contact</li>
..and so on
</ul>
Elsewhere in the page:
<div id="displayContent">Content refreshes onClick. Previous content fades out, fresh content fades in.</div>
Separate page (content.php):
<div id="about">About content</div>
<div id="contact">Contact content</div>
Agree with brhea, a question is a bit unclear.
If I understood well you're looking for something like this?
http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm
(click car names to see it in action)
OR with jQuery like this:
http://api.jquery.com/load/