Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A mainly JS based Gist that will dynamically change content on the site and leave it on the last loaded hover of what was selected.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".icon1").hover(
function () {
$( "i#changei" ).removeClass( "fa-toggle-off" );
$(".change1").text("");
$(".achange1").text("");
$(".change1").append("Secure & Protection");
$(".achange1").append("Nearly all of our servers come with <span>guaranteed DDoS protection</span> to protect your clients and your data from disruption of service. We also employ only the <spam>latest security methods</span> to keep your <span>data secure</span> and out of reach from competitors and hackers.");
$( "i#changei" ).addClass( "fa-lock" );
},
function () {
$( "i#changei" ).removeClass( "fa-lock" );
}
);
}
);
$(document).ready(function()
{
$(".icon2").hover(
function () {
$( "i#changei" ).removeClass( "fa-toggle-off" );
$(".change1").text("");
$(".achange1").text("");
$(".change1").append("Performance & Quality");
$(".achange1").append("We only deploy the <span>latest and greatest</span> from the vast range of server at our disposal and we regularly check the <span>performance</span> levels of all of our client's servers to ensure the expected <span>levels of service</span> do not drop below the standards we aim to achieve.<br><br>");
$( "i#changei" ).addClass( "fa-signal" );
},
function () {
$( "i#changei" ).removeClass( "fa-signal" );
}
);
}
);
$(document).ready(function()
{
$(".icon3").hover(
function () {
$( "i#changei" ).removeClass( "fa-toggle-off" );
$(".change1").text("");
$(".achange1").text("");
$(".change1").append("Personal Support");
$(".achange1").append("Every client gets their very own <span>dedicated staff member</span> assigned to their account to guide them through thick and thin at Galactic Servers. Your assigned account manager will have an <span>array of skills</span> and can be adapted to your project at any stage.<br><br>");
$( "i#changei" ).addClass( "fa-user" );
},
function () {
$( "i#changei" ).removeClass( "fa-user" );
}
);
}
);
$(document).ready(function()
{
$(".icon4").hover(
function () {
$( "i#changei" ).removeClass( "fa-toggle-off" );
$(".change1").text("");
$(".achange1").text("");
$(".change1").append("Other Opportunities");
$(".achange1").append("While you remain a client at <span>Galactic Servers</span> we will do as much as we possible can to <span>offer you the world</span>. Or more realistically, our in house developers are always available for hire under discounted prices for your <span>web</span>, <span>server</span> and <span>coding</span> needs.<br><br>");
$( "i#changei" ).addClass( "fa-terminal" );
},
function () {
$( "i#changei" ).removeClass( "fa-terminal" );
}
);
}
);
$(document).ready(function()
{
$(".icon5").hover(
function () {
$( "i#changei" ).removeClass( "fa-toggle-off" );
$(".change1").text("");
$(".achange1").text("");
$(".change1").append("DATA RECONNAISSANCE");
$(".achange1").append("We know how extremely frustrating losing your data can be. That's why at every level, we do our very best to ensure that <span>your data</span> cannot be <span>lost</span>, <span>stolen</span> or <span>corrupted</span>. But in the unlikely case that we cannot stop the inevitable we employ backups to <span>external servers</span> of all your files for peace of mind.");
$( "i#changei" ).addClass( "fa-hdd-o" );
},
function () {
$( "i#changei" ).removeClass( "fa-hdd-o" );
}
);
}
);
$(document).ready(function()
{
$(".icon6").hover(
function () {
$( "i#changei" ).removeClass( "fa-toggle-off" );
$(".change1").text("");
$(".achange1").text("");
$(".change1").append("CONSTANT ADAPTABILITY");
$(".achange1").append("At your hopefully long time at <span>Galactic Servers</span> we do our best to adapt to your needs. <span>Constantly</span> improving on your feedback and suggestions, allows us to become the <span>best business solution</span> you will ever need. Running multiple projects with us has its perks.");
$( "i#changei" ).addClass( "fa-gears" );
},
function () {
$( "i#changei" ).removeClass( "fa-gears" );
}
);
}
);
</script>
<div class="row">
<div class="col-md-10 col-md-offset-2">
<div class="row">
<div class="col-md-3">
<!-- sidebar -->
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
<ul class="nav nav2">
<li><a href="" class="icon1">SECURITY &amp; PROTECTION</a></li>
<li><a href="" class="icon2">Unique &amp; Fine-tuned</a></li>
<li><a href="" class="icon3">PERSONAL SUPPORT</a></li>
<li><a href="" class="icon4">PERSONAL SUPPORT</a></li>
<li><a href="" class="icon5">DATA RECONNAISSANCE</a></li>
<li><a href="" class="icon6">CONSTANT ADAPTABILITY</a></li>
</ul>
</div>
</div>
<div class="col-md-8">
<div class="mission featbox">
<i id="changei" class="fa fa-toggle-off"></i>
<h3 class="change1">Click on a tab above to begin</h3>
<p class="achange1"><br><br><br><br></p>
</div>
</div>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.