I am very confused! Here's the site I'm working on: http://209.200.104.187/
I am using the Cycle2 plugin for jQuery and CodeIgniter.
In Chrome, it looks like this:
There is a cycler behind the main content. It works for me in Chrome, but not in IE11. Furthermore, my client says it is not working in their chrome browser.
The way I generate the image cycler is like this:
<?php if(#$home_header == 1): ?>
<div id="slideshow" class="cycle-slideshow" data-cycle-pause-on-hover="false"
data-cycle-speed="3000">
<?php
$slides = glob('assets/images/home/background/'.'*.jpg');
foreach($slides as $s) {
echo '<img src="'.$s.'" />';
}
?>
</div>
<?php endif; ?>
I checked the IE11 source code and there are no images, but there IS <div id="slideshow"></div>. It just has an empty <div>.
MOREOVER, if I try to output straight HTML <img/> tags, IE11 is NOT showing them. Just for debugging purposes, I tried to put some images inside #slideshow, and they didn't appear in IE, even when I cleared the cache and refreshed.
I'm very confused because the debugging images show up immediately in Chrome. But never in IE.
Any ideas why IE is behaving so strangely? I am not using jQuery to initiate the Cycle2 plugin, I'm using data- attributes.
I tried it with jQuery initialization instead and that didn't work either.
Related
The goal is to have just the div with id="yourdiv" instead of the whole page. It works in Windows OS with Chrome but it does not work in iPad with Chrome which is my end goal.
The Script
function printContent(el){
var restorepage = $('body').html();
var printcontent = $('#' + el).clone();
$('body').empty().html(printcontent);
window.print();
$('body').html(restorepage);
The Button after some basic page example html
<div>
<p>whatever don't print this</p>
</div>
<div id="yourdiv">
<p>print this only</p>
</div>
<button id="print" onclick="printContent('yourdiv');" >Print</button>
Found a solution with another post that works in iPad with Chrome browser.
Print <div id="printarea"></div> only?
The solution from Hardik Thaker is the one that works for this. Though if you dont know you'll have to look up how to add in css to have it pull page styling.
I have a JSON object which store data about a website RSS feed:
var varNameSpace = <?php echo json_encode($article); ?>;
and I'm on the way to develop a Ticker, I need to display all objects elements on <li> tags and add the effect of scrolling dynamically.
Before I have used a javascript function to do that scrolling my javascript function look like:
<script>
var boutton=document.getElementById("start");
function startTicker(){
$("#news li:first").slideUp(function(){
$(this).appendTo($("#news")).slideDown();
});
}
boutton.onclick=setInterval(startTicker, 3000);
</script>
my HTML page look like:
<div>
<?php
foreach(getFeed() as $article){
?>
<ul id="news">
<li><h3><?php echo $article['title']; ?></h3></li>
</ul>
<p>
<?php echo $article['description']; ?>
</p>
<?php
}
?>
</div>
Once I execute this page, it was just the first element of the list which scroll the other list elements was considered as a unique element.
So, how can i scroll over all the list elements ?
I haven't tested your code, but I suspect the li:first has something to do with only selecting the first element.
No need to reinvent the wheel with this though, there are some great plugins out there that can achieve what you're asking for with minimal effort.
One such example that I've used before is http://richhollis.github.io/vticker/
It was quite easy to implement, and as you're already using jQuery won't require you to load any additional libraries.
On the other hand, if you're set on writing your own, this CodePen by Noel Killebrew looks like it would be a good starting point https://codepen.io/noelietrex/pen/ZGGoZM
I've been working with older versions of Tooltipster to HTML content (mostly divs with another picture and some text) on mouseovers over text or pictures, using the now deprecated writing HTML in the title method. After the update I want to switch to the current standard and I'm not quite managing it.
Jquery and Tooltipster are loaded correctly in my header, (verified that by triggering some Tooltipster error messages), and all tooltip instances in the page I'm working on have their class name changed to 'tooltipstered', so I'm pretty sure the script recognizes those too.
The page is written in php (using codeigniter) and the content produced by a foreach loop, the $key variable is numerical here.
echo "<img src='{$value['bild']}' style='width:60px; height:60px;'>";
echo "<br>";
echo "<span class='tooltip' data-tooltip-content='#$key'>";
echo "{$value['name']}";
echo "</span>";
echo "<br>";
This outputs:
<span data-tooltip-content="#1" class="tooltip tooltipstered">Schütze</span>
(There are 24 such instances on the page all in all, the tooltip-content attribute ranging from #1 to #24 so)
My tooltips are generated in a similar fashion, by another foreach loop:
<div class='tooltip_templates'>
<?php
foreach ($klassenbaum as $key => $value){
echo "<span id='$key'>";
echo "<h1>Text für Klasse Nummer $key!</h1>";
echo "</span>";
}
?>
</div>
Result:
<div class="tooltip_templates">
<span id="1"><h1>Text für Klasse Nummer 1!</h1></span
</div>
I've been following the instructions provived here:
http://iamceege.github.io/tooltipster/#getting-started under section 5. I'm quite clueless where my error is, the tooltips aren't showing up at all on a mouseover. And even more curiously: Some script is executed on hovering, because the spans containing the tooltip disappear from the code afterwards. (At least by checking the firebug console).
Thanks beforehand for any help on this!
Made a very poor mistake - the code seems to be indeed correct; the error was the CSS file from Tooltipster not loading correctly due to a spelling mistake.
I'm adapting a javascript toolbar to a Joomla CMS module. This javascript toolbar has many buttons whereby each buttons invoke a javascript file (plugin)
Current toolbar was done on Javascript.
This is the code to load the toolbar.
Initial code to call the toolbar and its plugins;
"undefined"==typeof window.AtKit?(d=document,jf=d.createElement("script"),jf.src="http://domain.com/jw3c/atkit.min.js",jf.type="text/javascript",jf.id="AtKitLib",d.getElementsByTagName("head")[0].appendChild(jf),window.AtKitLoaded=function(){var c=null;this.subscribe=function(b){c=b};this.fire=function(b,e){null!=c&&c(b,e)}},window.AtKitLoaded=new AtKitLoaded,window.AtKitLoaded.subscribe(function(){__start()})):__start();
function __start(){var c=window,b=AtKit;$lib=b.lib();var e="ftw resize fonts spellng dictionary insipio-tts readability wordprediction css overlay shortcutkeys tooltip".split(" ");b.importPlugins(e,function(){b.setLogo("http://domain.com/services/logo.jpg");b.setName("JW3C");"undefined"==typeof c.AtKitLanguage?b.setLanguage("en"):b.setLanguage(c.AtKitLanguage);var a;a="Version 1.0.0<p style=\"line-height:120%\">Created by <a href='http://domain.com'>S</a>, <a href='http://www.domain.my/'></a>.<br><br>";
a+="Fugue Icons © Brandon Aaron under MIT licence.<br>';a+="Word prediction provided by <a href='http://www.aitype.com/'>AIType</a>.<br>";
a+="Text-to-Speech provided by <a href='http://www.acapela-group.com/'>Acapela Group</a>.";a+="</p>";b.setAbout(a);$lib.each(e,function(a,c){b.addPlugin(c)});b.addResetFn("reset-saved",function(){b.clearStorage();null!=typeof localStorage&&localStorage.removeItem("ATBarAutoLoad")});b.addCloseFn("close-saved",function(){null!=typeof localStorage&&localStorage.removeItem("ATBarAutoLoad")});b.render();$lib(".at-btn:first a").focus();null!=typeof localStorage&&localStorage.setItem("ATBarAutoLoad",1)})}
;
The full javascript of the toolbar:
https://github.com/AccessAtECS/AtKit/blob/master/atkit/latest/atkit.js
One of the javascript button in the above code calls the following plugin to be included in the toolbar.
http://domain.com/services/jw3c/plugins/tts.js
As per the above code, the toolbar appears on top of my site with all plugins(javascript files).
Right now I dont want the toolbar invoke itself. But need to embed each item of these toolbar plugins into my php file below;
<div id="samsc-<?php echo $module->id?>" class="samsc <?php echo $css; ?>">
<div class="inner normal-msg">
<?php echo $text; ?>
//Need add javascript buttons here
</div>
<div class="buttons">
<span class="icon-toogle opened"><?php echo JText::_('TOGGLE_BAR'); ?></span>
</div>
</div>
Any hints greatly appreciated.
You are best looking at a non-minified version of the code to see how it works.
There appears to be one for this here:
https://github.com/AccessAtECS/AtKit/blob/master/atkit/latest/atkit.js
I'd imagine from that you should look around lines 94, as that "position:fixed" is what is fixing the bar to the top of your page.
Line 387 would be my guess where it is saying it should render the html next to the opening body tag.
If you don't want to edit this code directly, then it may be simpler (though bulkier) to use css and javascript to modify the display of the bar after it has loaded. For example, onload you could strip the "position:fixed" style and change the left and top values to match the left and top values of your module.
Hi I am using ImageFlow plugin in my website to add cover flow effect to set of images. I have gone through the documentation and tried with different examples they works fine but the major problem is that images are invisible when i first load the page, but appears as soon as i resize the browser window size manually by mouse. Below is the code where i used Imageflow class.
<div id="unique_name" class="imageflow">
<?php foreach ($ABC['A'] as $ABC) : ?>
<img src="../<?= $ABC['dir'] . $ABC['image'] ?>" width="200" height="200" />
<?php endforeach; ?>
</div>