I have a div which is set to refresh every 5s via a javascript reload. WHen the main page loads it is fine, it fits in it's box and everything is in line (picture 1). After 5s when the javascript reloads it, it stretches the div (picture 2) and after another 5s it stretches again (image 3) it then remains at this level of stretch. I've tried putting the div with id=messages as class=col_1_2 one but it make no difference.
index.php - where the div is:
<div class="container">
<div class="clear padding20"></div>
<div class="col_1_2"><?php include('companynews.php'); ?></div>
<div class="col_1_2 last" id="messagesouter" name="messagesouter"><div id="messages" class="messages"><?php include('messages.php'); ?></div></div>
<div class="clear padding20"></div>
<div class="container">
<ul>
<li>Employee Details</li>
<li>Abscence Records</li>
<li>Fleet Records</li>
<li>Time Sheets</li>
<li>Abscence Request</li>
</ul>
<div class="clear"></div>
<div class="bordered_box"></div>
more of the page
Javascript to reload the messages div:
<script type="text/javascript">
function loadlink(){
$('#messages').load('messages.php',function () {
$(this).unwrap();
});
}
loadlink();
setInterval(function(){
loadlink()
}, 5000);
</script>
CSS for the class:
.col_1_2 {
width:460px;
float:left;
margin:0 20px 0 0;
example output of messages.php:
<div class="toogle_box">
<div class="toggle opened_toggle">
<div class="icon"></div>
Messages </div>
<div class="toggle_container">
<!--LINE MANAGER ONLY ITEMS-->
<!--PENDING ABSCENCE REQUESTS-->
You have 1 pending abscence request<br>
<!--TIMESHEETS TO BE COMPLETED-->
Please complete the timesheet for 01/12/2015<br>Please complete the timesheet for 02/12/2015<br>
</div>
</div>
It looks like you are using some CSS framework (Bootstrap?) in your layout, namely .col_1_2.
When you use the jQuery .load() method, you are getting your content from message.php, which is okay.
However, after the load is finished, you issue $(this).unwrap() which removes the parent element that is enclosing #messages, first the block with classes col_1_2 last and then upon the another load, the block with class container.
The code is systematically undoing the layout parent block by parent block.
I don't think you need the .unwrap() method, so try removing it.
Related
I have a this problem:
I use a jquery plugin fullPage.js by Alvaro Trigo on my website. The plugin script automatically inserts the html structure in certain elements... in my html I have:
<div class="section fp-auto-height-responsive" id="slider-section">
<div class="slide" id="co-delame-section">
<div class="slide-wrapper">
...
</div>
</div>
</div>
And when the page is loading, javascript generates extra html tags and css, so it looks like:
<div class="section fp-auto-height-responsive fp-section active fp-completely" id="slider-section" data-anchor="About" style="height: 638px;">
<div class="fp-slides">
<div class="fp-slidesContainer" style="width: 100%;">
<div class="slide fp-slide fp-table active" id="co-delame-section" style="width: 100%;">
<div class="fp-tableCell" style="height:638px;">
<div class="slide-wrapper">
</div>
</div>
</div>
</div>
</div>
</div>
I want to append more slides (slide class) for a certain page resolution, so that when user is on mobile with smaller screen, the extra slides won't load.
I do it with this javascript code:
$.get("http://marketingo.cz/wp-content/themes/twentysixteen-child/slider_cs.html", function (data) {
$("#slider-section").append(data);
});
And there is the problem... it works in about 50% page loads, the problem is that sometimes it appends the slides after the fullPage generates the structure, so that the appended slides are out of the slider structure... like this:
<div class="section fp-auto-height-responsive fp-section active fp-completely" id="slider-section" data-anchor="About" style="height: 638px;">
<div class="fp-slides">
<div class="fp-slidesContainer" style="width: 100%;">
<!-- the right place of a slide -->
<div class="slide fp-slide fp-table active" id="co-delame-section" style="width: 100%;">
<div class="fp-tableCell" style="height:638px;">
<div class="slide-wrapper">
</div>
</div>
</div>
</div>
</div>
<!-- appended slides out of slider blocks -->
<div class="slide" id="jsme-partner">
</div>
<div class="slide" id="vase-problemy">
</div>
</div>
So it looks the fullPage.js script runs before the slides are appended, but in the html head tag I firstly put the script to append the slides and fullPage is loaded after...
But what is really weird is that sometimes it loads correctly, sometimes not. Clearing the cache on refresh helps sometimes, but I can't say if there is any pattern with deleting the cache.
You can check it on http://marketingo.cz/en/?stack-overflow#About and give it a few refreshes with cache clearing to see...
The questions is - how can I ensure that the html is appended before the fullPage plugin modifies the code so that the appended sliders will be in a same container?
Thanks for a help! :)
Easy.
Just initialice fullPage.js after you append the slides by using the $.get callback.
$.get("http://marketingo.cz/wp-content/themes/twentysixteen-child/slider_cs.html", function (data) {
$("#slider-section").append(data);
//initialice fullPage.js here:
$('#fullpage').fullpage();
});
I am writing a phonegap application using Angular's ngRoute as an MVC. This all works beautifully, except for my top bar which includes the trigger button for the slide out menu. as it sits now, the top bar has the same title for every page, so to fix this I moved the top bar inside of the route view, which now stops my slide out menu from working.
How can i get the javascript trigger to actually run properly inside a route view (i understand this has to do with the page, and all of its JS, rendering before the route view is actually loaded) and I also would LIKE to execute other JS in a route view as well. for example, one of the views handles GPS location and NFC chip reading and i would love to only execute those scripts when that view is active rather than all the time, which chews up battery listening for NFC chips and GeoData even when that view is not in use.
if this isnt possible or is a serious pain then id just as soon go back to conventional page changes instead of views, im just hoping that there is a way to do this.
Here is the relevant code illustrating the issue:
index.html:
<script type="text/javascript">
$(window).load(function() {
$('#menutoggle').toggle(function() {
$('#right').animate({
left: 200
});
}, function() {
$('#right').animate({
left: 0
});
});
});
</script>
<div id="menu">
<span class="logo-bar"></span>
<ul id="sidenav">
<li>
<a href="#/Checkin">
<img src="img/home.png">Check In
</a>
</li>
<li>
<a href="#/logout">
<img src="img/logout.png">Logout</a>
</li>
</ul>
</div>
<div class="content view-animate-container">
<div id="contentcontroller" ng-view class="view-animate wrapper">
</div>
</div>
CheckIn.html
<div id="right">
<div id="menubar">
<div id="menutoggle">
</div>
<div class="title">
Check In
</div>
</div>
</div>
Now the toggle button works fine on whatever view is initially loaded, however as soon as a page change occurs the menu toggle simply stops.
is there any way to remedy this?
I have a pretty average jQuery Mobile app. On the bottom there is a navbar with icons and text.
This is how it should look
but when I tap/click on the page it toggles to this
To save myself some repetition, I've been appending the same footer to each page using this basic script.
$(function ()
{
$("div[data-role='page']").append($("#footer").html());
$("body").trigger('create');
});
And here's the HTML.
<div class="hidden" id="footer">
<div data-role="footer" data-position="fixed" data-id="footer">
<div data-role="navbar" data-iconpos="top">
<ul>
<li>Maps</li>
<li>Rules</li>
<li>Schedule</li>
<li>Settings</li>
</ul>
</div>
</div>
</div>
I believe this script is the cause of this issue. Any ideas for how to fix this behavior?
EDIT: In inspecting the DOM I found that a class called "ui-fixed-hidden" is being toggled on the data-role="footer" div when I click.
It turns out that just because my template footer div was nested in another div with "display: none" doesn't mean that jQuery Mobile wasn't using that element. As such, I had multiple footers which created weird behaviors.
I resolved this by moving my template footer to a seperate html file and then loading it in on page start.
I'm currently making a website for a university project where I'm using a piece of Javascript ( http://buildinternet.com/project/supersized/ ) in order to generate a background that is a gallery of several images.
I'm trying to set the site so that it will display a single image as the background in the event of Javascript being turned off, but the navigation elements of this slideshow are generated using HTML code outside of the script tags and inside the body tag.
Is there a way I can set this HTML code so that it will only be included when Javascript is active, leaving the screen clear of the navigation controls when it isn't?
At request the code I'm trying to isolate is the Div tags being called below.
<!--Thumbnail Navigation-->
<div id="prevthumb"></div>
<div id="nextthumb"></div>
<!--Arrow Navigation-->
<!-- <a id="prevslide" class="load-item"></a>
<a id="nextslide" class="load-item"></a>
<div id="thumb-tray" class="load-item">
<div id="thumb-back"></div>
<div id="thumb-forward"></div>
</div>
<!--Time Bar-->
<!--<div id="progress-back" class="load-item">
<div id="progress-bar"></div>
</div>
<!--Control Bar-->
<div id="controls-wrapper" class="load-item">
<div id="controls">
<a id="play-button"><img id="pauseplay" src="img/pause.png"/></a>
<!--Slide counter-->
<div id="slidecounter">
<span class="slidenumber"></span> / <span class="totalslides"></span>
</div>
<!--Slide captions displayed here-->
<div id="slidecaption"></div>
<!--Thumb Tray button-->
<a id="tray-button"><img id="tray-arrow" src="img/button-tray-up.png"/></a>
<!--Navigation-->
<ul id="slide-list"></ul>
</div>
</div>
Like #jumpingcode mentioned, you would want to hide the controls in question with CSS, and show them with JavaScript.
Hide the div with CSS:
#controls-wrapper {
display:none;
}
Then show it in your page with jQuery:
$('#controls-wrapper').show();
Or use .css() to have more control over what type of display property to use:
$('#controls-wrapper').css('display', 'block');
Here goes a really simple question!
I want to make a navigation menu and content with jQuery.
Here is my navigation links :
<div id="menu" class="menuBg">
<ul>
<li><a class="btn1" href="#">How To?</a></li>
<li><a class="btn2" href="#">Prizes?</a></li>
<li><a class="btn3" href="#">Rules</a></li>
<li><a class="btn4" href="#">Score</a></li>
</ul>
</div>
Content :
<div id="content">
<div id="MainPage"><!-- content goes here --></div>
<div id="HowTo"><!-- content goes here --></div>
<div id="Prizes"><!-- content goes here --></div>
<div id="Rules"><!-- content goes here --></div>
<div id="Score"><!-- content goes here --></div>
</div>
Sample Navigation Code (includes first links code) :
$(document).ready(function() {
$('#baslaBtn').on('click', function(){
$('#HowTo').hide();
$('#Prizes').hide();
$('#Rules').hide();
$('#Score').hide();
$("#MainPage").fadeOut(500,"linear", function() {
$("#soru1").slideToggle(function() {
$("#soru1").effect("fadeIn",2000);
}).show(2000);
});
$('#MainPage').hide(1000);
});
});
...and i have 5 more on('click') function to navigate my menu to my contents. The problem is every time all of these contents loading without any effect. I want to load my content when load process is finished. The other problem is i'm putting hide() in every function to hide other objects.
Is there any way to make a function without a repeated code like :
$('#HowTo').hide();
$('#Prizes').hide();
$('#Rules').hide();
$('#Score').hide();
And i want to show my contents opening with simple fadeIn effect. If i click the other links all objects will hide them self or fadeOut, new content object's goes load and will open with fadeIn effect.
P.S : When i load my content to i can't use the content features like jquery.scroll plug in..All of them are disabling themself.
Really confused. Any suggestions?
Thanks.
Assuming you're going to fade all divs inside #content and #soru1 is the div you want to show, you could simply use this:
$('#content div').fadeOut(function() {
$("#soru1").fadeIn(2000);
});
This will fade every div inside #content.
To fade only specific divs and not every div element inside #content, you can change your code into this, as example:
<div id="content">
<div id="MainPage" class='toFade'><!-- content goes here --></div>
<div id="HowTo"><!-- content goes here --></div>
<div id="Prizes class='toFade'"><!-- content goes here --></div>
<div id="Rules"><!-- content goes here --></div>
<div id="Score" class='toFade'><!-- content goes here --></div>
</div>
And do the following:
$('#content .toFade').fadeOut( function() {
/* ... */
});
Then, only the selected divs would fade.