Posts by tun712

Need web hosting which one to choose?

GoDaddy, Bluehost, JaguarPC or else?

Is there any cost effective cloud hosting option available?

I h've created custom font in Adobe Illustrator for my client. My client want to use it on windows as well as his website.
I used some website to convert font from .ai & .svg font to .ttf they are creating .ttf file but it is not accessible by windows. When tried to install, it displayed message corrupt file.

How to create ttf or otf font from vector created in Adobe Illustrator

How to add meeting host/meeting controler
How to allow meeting host to set another person as host
How to add signing with account

https://jitsi.org/jitsi-meet/

I'm working on site preloader. I need help to animate div width on every image load

Concept
Check every image in container is loaded.
On every image load increase width of loader in percent to match 100% loader width ( 100% of viewport) on last image load.
After last image is loaded loader will be 100% of viewport & run any function suppose function a() { }
I think more than one .animate(); functions needed.
Is any need to use (g = parseInt(c / a.length * 100) to increase width
End

Script code hints (it's uncomplete I'm working on it)

 var a = $("body").find("img[src]");//finds images in any container. Here body.

 $("body [style]").each(function () {
 var b = $(this).css("background-image").replace(/^url\(["']?/, "").replace(/["']?\)$/, ""); 
 });//finds all background images

  var c = 0,
  d = 0,
  e = 2e3,
  f = 100,
  i = $(".loader");

  i.stop().animate({
   width: f + "%"
   }, e / 2), 
   {
        duration: e
  })

Other code

<div id="loader"></div>

#loader {
position: fixed;
width: 10px;
height: 10px;
overflow: hidden;
display: block;
padding: 0px;
left: 0;
top: 0;
}

@gentlemedia

Thanks.

Now, I'm using your code. my code was confusing

https://codepen.io/anon/pen/zXZKYN

Help to create function

function moveUp() {             
    }
function moveDown() {           
    }

Need help to scroll when mouse wheel is used. Scroll Up or Down as per mouse action.
I'm trying to create moveDown() & moveUp() function, to scroll according mouse wheel action
On scroll, remove class of current div :- .active and add class :- .active to scrolled div(div in viewport), by default first div has class .active.

Following is my code structure.

HTML

<div class="wrap">
    <div class="pane active"><h1>pane_1</h1></div>
    <div class="pane"><h1>pane_2</h1></div>
    <div class="pane"><h1>pane_3</h1></div>                 
    <div class="pane"><h1>pane_4</h1></div>
    <div class="pane"><h1>pane_5</h1></div>
    <div class="pane"><h1>pane_6</h1></div>
</div>

CSS

.wrap {
    height: 100vh;
    width: 100vw;
    position: absolute;
    display: inline-block;
    margin: 0 auto; 
    top: 0;
    left: 0;
    background: #D88C2A;
    overflow:hidden
}
.pane {
    height: 100vh;
    width: 100vw;
    position: relative;
    margin: 0 auto; 
}

Script

$(document).bind('mousewheel DOMMouseScroll MozMousePixelScroll', function(event) {
          event.preventDefault();
           var delta = event.originalEvent.wheelDelta || -event.originalEvent.detail;

});

@gentlemedia thanks
Please check my code on codepen. After checking my code you will understand my problem.
Scrolling is not working properly. Need help to simplify my code.

DEMO of my code
https://codepen.io/anon/pen/PgNBrb OR
https://s.codepen.io/anon/fullpage/PgNBrb

@Dani Thanks, I got reply on this after long time!
Your code solution works sometimes, sometimes not.

Following is my code. I'm stuck with scrolling.

I'm using class active to make div as current div in viewport.

I need help to scroll to div using nav created using js

HTML

<div class="content">
    <div class="content_section active" data-index="1"></div>
    <div class="content_section" data-index="2"></div>
    <div class="content_section" data-index="3"></div>
    <div class="content_section" data-index="4"></div>
</div>

/*following is generated dynamically using js as per number of content_section*/
<ul class="nav">
    <li><a data-index="1"  class="active_dot"></a></li>
    <li><a data-index="2"></a></li>
    <li><a data-index="3"></a></li>
    <li><a data-index="4"></a></li>
</ul>

CSS

.content{
    width: 100vw;
    height: 100vh !important;
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    z-index: 10;
    overflow: hidden
}

.content:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    display: inline-block;
    z-index: 1;
    top: 0;
    left: 0;
    background: rgba(5,0,4,0.7);
    }

.content_section    {
    rgba(224,185,48,0.85)
    position: relative  !important;
    height: 100vh !important;
    width: 100vw !important;
    margin: auto;
    z-index: 2; 
}

Need help with this

$("ul.nav li a").on('click', function (e) {
    e.preventDefault();

});     

rproffitt ,

actually I don't have much time to start Project on my own. This is interesting topic, but time consuming & team dependent.
I just wanted to start project where programmers can join & help to OS development.

As I'm reading more on this topic, understanding the actual problems in overall development.

Just thinking for free alternative to running Windows applications.

(banging head on RHEL 7.6 doors)

I've just installed RHEL 7.6. I've installed Base environment: Server with GUI with all addons for selectred environment

During Installation I created Root Password & created user form User Creation with, Make this user administrator option

Now, post install & after successful login to RHEL environment, I'm unable to install any software or access KUser to edit user permission or change user group

While installing anything it gives error something went wrong, Error msg when trying to use KUser , Error opening /etc/shadow for reading

1. Should I install again with Root only?
2. How to give root permissions to user created during Installation?

Ref:- Installation of “Red Hat Enterprise Linux (RHEL) 7.0” with Screenshots

Need books or tutorials to working in RHEL7 GUI

TunOS : Sounds Nice!!! :) :D

Need help to start my opensource project. How do I start, just like ReactOS for example.

What are requirements for developing / starting OS Project?

I have listed below basic requirements

• kernel
• boot loader
• filesystem
  Which compiler should I choose?

I'm stuck with playing multiple sounds on website. I've 3 sounds ,

• Background sound
• Hover Sound
• Link Hover Sound

I'm playing background sound with following code,

    //play audio
    var  audioOn = true; 
    var bg_src = "audio/bgaudio.mp3";
    var audio = new Audio(); 
    audio.addEventListener("load", function() {
      audio.play();
    }, true);
    audio.src = bg_src;
    audio.autoplay = true;
    audio.loop = true;
    audio.volume = 0.2;     

    //play or pause audio
    $('.equalizer').on('click', function(e) {
        if (audioOn == false) {
            audio.play();
            audioOn = true;

        } else {
            audio.pause();
            audioOn = false;
        }
    });

This one is working well for background sound, need help to create functions to play & toggle playing of all sounds.

function playAudio(url){ }
function toggleSound() { }

@rproffitt , I think nobody's interested in discussion, except you, but I'm getting very curious...

How do I start Open-source project ? How to gather programmers? ( Not possible to force someone, but how to ask people to join project)

Which compiler should be used for compiling c++ & assembly code?

I'd like to use code by Richard Burgess MMURTL V1.0 Is any other good option?
"From scratch"- is it good idea, or using some base s/w would be better?

Poor response for this discussion here, if I start project , can anybody help me here?

Would you like to help me to start project?

I found some examples of custom function. By checking code of some websites I created my custom function, but I'm unable to use it. How to call & use following functions?

goHome: function goHome(e) {
    //TimelineMax code
    //TweenMax code
}

 openWork: function openWork(e) {
     //TimelineMax code
     //TweenMax code
 }

  openAbout: function openAbout(e) {
      //TimelineMax code
      //TweenMax code
  }
  goToProjects: function goToProjects() {
    //TimelineMax code
    //TweenMax code
  }

Working on fullscrfeen slider.

Need help to count slides inside main slider container & create navigation <ul class="Nav"><li><a></a></li></ul>. Need help to add scroll effect Vertically or Horizontally
Add class .active to active slide
Display tooltip on navigation hover

Need help to write function ,

$('main').slider({ //It may be  main or .slider or #slider
      sectionSelector: '.slide',   
      navigation: true,
      navigationPosition: 'right',
      navigationTooltips: true,
      scrollHorizontally: true
    });

**HTML**    
<main class="slider" id="slider">
  <section class="slide" data-tooltip="tooltip-info">
    <h1>slide 1</h1>
  </section>
  <section class="slide" data-tooltip="tooltip-info">
    <h1>slide 2</h1>
  </section>
  <section class="slide" data-tooltip="tooltip-info">
    <h1>slide 3</h1>
  </section>
  <section class="slide" data-tooltip="tooltip-info">
    <h1>slide 4</h1>
  </section>
</main>

**CSS**
main {
    width: 100vw !important;
    height: 100vh !important;
    position: absolute !important;
    display: inline-block;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    overflow: hidden;
}

section {
    width: 100%;
    height: 100%;
  background: #EF8D24;
    overflow: hidden;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    /*visibility: hidden;*/
}

section.active {
  visibility: visible;
  }

Is it possible to use FreeDOS as a base for Developing Operating System?
Is it possible to add GUI to FreeDOS like ReactOs have used winehq, (In case of Linux:- GNOME, KDE, Xfce)?

I found this xfree86, X.Org, freedesktop.org

Another interesting thing I found, The original sources of MS-DOS

What you think about FreeBSD & Chrome OS?
What about MMURTL V1.0?

Why you are not expecting it to be completed ?

I also found another link MMURTL V1.0, how useful is this?

Is there any other alternative available ?

I was wandering aimlessly on google, I found ReactOS. It's interesting.

I tried this OS, many windows applications are running well on it. But some latest applications are unable to run like Firefox 65.0.1

I have few questions,

• How worth is using this OS?
• What is future of this OS?
• How secure is this OS?
• What development is required to run latest applications?
• How to search books & tuts, which are useful for this OS development?
• Can anybody help me here to compile & edit some part of OS (I would like to do some theme work)

@happygeek ,
Thanks for wishing good luck

• My Primary code jsfiddle
• I was using iscroll to scroll to target.
• data-section attribute is used for section id. section is full height & full width size.
• data-slide attribute is used to get target id, it is animated mouse icon.

how to scroll to target ?

Need help to create scrolling using custom data- attribute

Client didn't have clear views & goals about project.
So Finally rejected the project.

I don't have team. Timeline for project is 3 months. Client have own printing & other machines & running offline business, now wants to go online.
Client have given lots of details I just summed up as it's not possible to post lot of information here. All links are given by client. I posted it - as it is.

Client is not technically sound, just using words "PHP, mysql " again & again... So I have to decide about platform or CMS
Is it possible to go for php + mysql + jquery + cart s/w?
What details should I post here?
Pricing is not finalized yet what pricing is good enough for this complicated project?

Got Client with need of "online print shop"
Client is providing paper printing (like business cards, flyers), printing on cloths, office stationary, logo embroidery on any type of clothing.
Client provided some examples.

Links

• rockdesign
• moo
• readyprint
• vistaprint
• printshop
• printvenue

Where do I start?
Which platform should I choose?

1. CorePHP
2. Wordpress
3. WooCommerce
4. Magento
5. Prestashop
6. WordPress

Is there any plugin or script that should I go for???

Thank you

http://www.pc-specs.com/mobo/Intel/Intel_DH87MC/2625

My board is not supporting dual GPU, so I have to stick with single GPU. I'll replace K600 & going for other upgrades instead of building new PC

Thanks for guidance

Thanks

I guess only 3 things will upgrade my pc performance

1. memory
2. SSD
3. Graphics card

Thinking for 1050 Ti 4 GB. Which brand should I go with - Zotac, MSI, EVGA ?

1. SPECCY shows Frequency 798MHz ( memory), where amazon shows Speed: 1600MHz CL9, SPD Speed: 1333MHz

2. I'm using NVIDIA Quadro K600 1GB DDR3. I guess 1050 - 1080 comes with DDR5, so what would be better adding 1050 - 1080 with K600 or replacing existing K600?
   Is it possible to add GPU other than DDR3?

Any suggestion(Manufacturer, model) for GPU?

Thanks
I think GPU is the problem child
I'll add some cooling for GPU.

I use uTorrent for movies sometimes, uninstalled it , all s/w are licensed

I have few question,

1. Should I continue use of CPU:- Intel(R) Core(TM) i5-4670K CPU @ 3.40GHz
2. Should I just add new SSD or using SSD(primary) + current HDD(secondary) advisable (& possible) ?
3. Is it possible to add one more graphics card of higher capacity with NVIDIA Quadro K600 (using two GPU) or replace existing one?
4. Should I switch Power Supply to 650?
5. I found this RAM on amazon how to check, it is same make and model with mine

1. http://speccy.piriform.com/results/pHqck23IE4cbNbohvQQySyV
2. Power Supply Corsair CX450M 450 W

I build my pc 5 years back. Last year cabinate fans & Heat sink replaced.

I'm planning to build workstation. Budget is about $500 - $750. What should be the configuration?

I've following configuration PC. It goes crazy sometimes. All cabinate fans starts running crazily & display goes off, still I can hear audio like songs or movie audio.
After switching the power it becames normal.

configuration

1. CPU:- Intel(R) Core(TM) i5-4670K CPU @ 3.40GHz
2. Motherboard:- Intel DH87MC
3. RAM:- 8.00GB Single-Channel DDR3 @ 798MHz
4. Graphics:- NVIDIA Quadro K600
5. Storage:- Seagate 2TB SATA

How to fix the problem???

I found some examples of Seamless loops,

GSAP
https://codepen.io/PointC/pen/qXMeeg
https://codepen.io/GreenSock/pen/KwqPjZ

css
https://codepen.io/strigiforme/pen/zLbYWm

Please help someone to create Seamless loop of <svg> <rect /> </svg>

I’ve created animated rect shape with greensock. It's not working on jsfiddle so created on codepen
I’ve three shapes. I need help with following,

1. make it 100% height & width of viewport
2. it stops for a while before repeating, move rect without any gaps

3. they bacomes one rect while ending keep fixed distance between all 3 rect

   <svg  x="0px" y="0px" width="100%" height="100%">
     <rect x="0" y="0" fill="none" stroke="#88CE02" stroke-width="4" stroke-miterlimit="30" width="100%" height="100%" id="rect1" />
     <rect x="0" y="0" fill="none" stroke="#ce4201" stroke-width="4" stroke-miterlimit="30" width="100%" height="100%" id="rect2" />
     <rect x="0" y="0" fill="none" stroke="#8601ce" stroke-width="4" stroke-miterlimit="30" width="100%" height="100%" id="rect3" />
   </svg>
   
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
   <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script> 
   <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.min.js'></script> 
   
   $( document ).ready(function() {
   
   var shapes = $("rect"),
   tl = new TimelineMax({repeat:-1});
   
   tl.staggerFromTo(shapes, 6, {drawSVG:"2%"}, {drawSVG:"98% 100%"}) 
   
   });

http://jsfiddle.net/cryzqu7b/

Check the difference between animate1 & animate 2.

I'll try animejs

But as I said, I have too many animations to handle keeping project lightweight

I'm working on big project where I have many animations to handle, or otherwise there is jquery transform plugin to handle border animation. But I cant use different jquery plugins for each and every different animation. So I'm trying to manage animations with just GSAP.

I have not used GSAP before, So I'm still struggling with GSAP

@both
Thanks

@rproffitt
I was using jquery-transform plugin for the same animation, but I found GSAP more usefull. I tried TweenLite, TweenMax, TimelineLite, TimelineMax. TimelineLite() & TweenLite() is working for me.

TweenLite.fromTo animates all borders at same time, but it only works for first animation i.e. .animate1, TweenLite is not working for second animation i.e. .animate2.

TweenLite works okay for fromTo & stops working when another .to() is added like in second animation

@gentlemedia
I got problem because I'm writing my code. I'm the author of that jsfiddle.

Borders are animating one after one. Need help to animate all borders at same time
Here is running example jsfiddle

CSS

* {
    padding: 0;
    margin: 0;
    outline: none !important;
}
body {
    background: #E0D4D4;
    overflow: hidden;
}
.borders {
    height: 100vh;
    width: 100vw;
    position: absolute;
    display: inline-block;
    z-index: 1;
}
.border-t {
    position: absolute;
    z-index: 1;
    height: 1px;
    top: 60px;
    left: 60px;
width: calc(100% - 60px * 2);
}
.border-t-l-wrap, .border-t-r-wrap {
    position: absolute;
    top: 0;
    height: 100%;
    overflow: hidden;
}
.border-t-l-wrap {
    left: 0;
    width: 50%;
}
.border-t-r-wrap {
    right: 60px;
    width: calc(50% - 60px);
}
.border-t-l {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #2a2a2a;
    opacity: 0.6;
    transform: translate3d(100%, 0, 0);
}
.border-t-r {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #2a2a2a;
    opacity: 0.6;
    transform: translate3d(-100%, 0, 0);
}
.border-r {
    position: absolute;
    z-index: 1;
    width: 1px;
    top: 60px;
    right: 60px;
height: calc(100% - 60px * 2);
}
.border-r-t-wrap {
    top: 60px;
    height: calc(50% - 60px);
}
.border-r-t, .border-r-b {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #2a2a2a;
    opacity: 0.6;
    overflow: hidden;
}
.border-r-t-wrap, .border-r-b-wrap {
    position: absolute;
    left: 0;
    width: 100%;
    overflow: hidden;
}
.border-r-b-wrap {
    bottom: 0;
    height: 50%;
}
.border-r-t {
    transform: translate3d(0, 100%, 0);
}
.border-r-b {
    transform: translate3d(0, -100%, 0);
}
.border-b {
    position: absolute;
    z-index: 1;
    height: 1px;
    bottom: 60px;
    left: 60px;
width: calc(100% - 60px * 2);
}
.border-b-l-wrap, .border-b-r-wrap {
    position: absolute;
    top: 0;
    height: …

I'm still working on little issues. Following is updated code.

index.php

<p>Sound Link:- http://soundbible.com/mp3/cartoon-birds-2_daniel-simion.mp3</p>
<a href="#" class="birds">Cartoon Birds</a>
<br />
<h4><a href="#" class="ToggleMute">Toggle Mute</a></h4>

main.js

jQuery(document).ready(function($) {
    "use strict";

    var audioOn = true;

    function toggleSound() {
        if (audioOn) {
            audioOn = false;
        } else {
            audioOn = true;
        }
    }

    if (audioOn === true) {
        playAudio("birds");
    }

    $('a.birds').on('click', function(e) {
        e.preventDefault();

        if (audioOn === true) {
            playAudio("birds", {
                volume: .8
            });
        }
    });

    $('a.ToggleMute').on('click', function(event) {
        event.preventDefault();
        toggleSound();
    });

})(jQuery);

I’ve updated code and added toggleSound() function, audioOn = true condition check added. It is working, but it does not stops sound if it is playing. It only checks before playing any sound, is, audioOn = true or false.

Also code does not work on page refresh, it does not play any sound on page refresh

1. Need help to update code so it can stops any playing sound.
2. Need help to paly sound on pageload & page refresh

Please help

With the help of colleague & css-tricks I ended up with following code with some problems.

index.php

<p>Sound Link:- http://soundbible.com/mp3/cartoon-birds-2_daniel-simion.mp3</p>
<a href="#" class="birds">Cartoon Birds</a>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript" src="main.js"></script>

script.js

var src = {
  "birds" : {
    url : "audio/cartoon-birds-2_daniel-simion.mp3"
  } 
};

var soundContext = new AudioContext();

for(var key in src) {
  loadSound(key);
}

function loadSound(name){
    "use strict";
  var sound = src[name];

  var url = sound.url;
  var buffer = sound.buffer;

  var request = new XMLHttpRequest();
  request.open('GET', url, true);
  request.responseType = 'arraybuffer';

  request.onload = function() {
    soundContext.decodeAudioData(request.response, function(newBuffer) {
      sound.buffer = newBuffer;
    });
  };

  request.send();
}

function playAudio(name, options){
    "use strict";
  var sound = src[name];
  var soundVolume = src[name].volume || 1;

  var buffer = sound.buffer;
  if(buffer){
    var source = soundContext.createBufferSource();
    source.buffer = buffer;

    var volume = soundContext.createGain();

    if(options) {
      if(options.volume) {
        volume.gain.value = soundVolume * options.volume;
      }
    } else {
      volume.gain.value = soundVolume;
    }

    volume.connect(soundContext.destination);
    source.connect(volume);
    source.start(0);
  }
}    

main.js

jQuery(document).ready(function($) {
 "use strict";

playAudio("birds"); 

$('a.birds').on('click', function(e) {
  e.preventDefault();
  playAudio("birds", { volume: .5});
});

})(jQuery);

This code is working well for me. Have some issues. See below

1. struggling with soundOn = true/false checking
2. struggling with function toggleSound() { } (universal mute/unmute button)
3. struggling with adding var audiotypes = { }
4. code for .on('click',function(e) { }); is working well, but for jQuery(document).ready(function($) { playAudio("birds"); })(jQuery); is playing sound only once when window is opened, it does not plays any sound on page refresh.
5. play any sound only if soundOn = true
6. struggling with play …

Thanks

My Code

var audiotypes = {
    "mp3": "audio/mpeg",
    "mp4": "audio/mp4",
    "ogg": "audio/ogg",
    "wav": "audio/wav"
}

function audio(sound) {
    var audio_element = document.createElement('audio')
    if (audio_element.canPlayType) {
        for (var i = 0; i < arguments.length; i++) {
            var source_element = document.createElement('source')
            source_element.setAttribute('src', arguments[i])
            if (arguments[i].match(/\.(\w+)$/i))
                source_element.setAttribute('type', audiotypes[RegExp.$1])
            audio_element.appendChild(source_element)
        }
        audio_element.load()
        audio_element.playclip = function() {
            audio_element.pause()
            audio_element.currentTime = 0
            audio_element.play()
        }
        return audio_element
    }
}

var playAudio = audio('audio/wav/InThePark.wav', "audio/mp3/InThePark.mp3");

playAudio.playclip();

Working Example

You can here sound when page is loaded. It can be used for actions like click, hover.

jsfiddle adele hello

I'm not asking to write whole code for me. I need help to modify my code. I want to add some more functionalities to my code.
I'm trying something like following.

1. soundOn = true/false
2. var audiotypes = {
        "mp3": "audio/mpeg",
        "mp4": "audio/mp4",
        "ogg": "audio/ogg",
        "wav": "audio/wav"  
    }
3. var sounds = {
      "sound1" : {
        url : "audio/sound1.wav"
      },
      "sound2" : {
        url : "audio/sound2.mp3",
      },
      "sound3" : {
        url : "audio/sound3.ogg"
      },
      "sound4" : {
        url : "audio/sound4.mp4"
      }
    };
4. function loadSound(name){
    //code to initialize sound with name and url
        var sound = //name
        var url = //url

    }
5.  function playAudio(name, options) { 
        var sound = //name
        var soundVolume = //volume

        //code to check soundOn is true
    }
6. function toggleSound() {
    //stop all playing sound and reset them to start position
    //Or Enable all sounds to play  
    //Set soundOn = true/false
    }

7. To play a sound, Call function as …

@All Thanks

As I said I'm working on themes, where I need to use low volume of background music. So I want to control Volume, Play/Stop of background music. (HTML Audio/Video DOM volume Property)

Also I'm adding some sound effects to actions - click, hover as well as appearing/diappearing of overlay. I’ve added my working code(at the end) in my last post. It works, but I need something more, like website examples I provided in my posts.

No need to install Greensock, just try my code in my last post

I'm explaining my goals

Need to create following functions

1. soundOn= (if true play all sounds when they are called,  if false no background music, no sond effects on events/actions)
     Purpose:-  all sound effects on website to play or not. 

2. var audiotypes = { }
    Purpose:-  Code to define  valid audio file type to be played

3. function playAudio() {  }
    Purpose:-  code to play all audio files, it may called as,  
    var sound1 = playAudio({
        if (audioOn) {
            src: ["src/sound1.wav", "src/sound1.mp3"],
            volume: 0.5
           } 
    });

4. function toggleSound() { }
    Purpose:- play, stop all audio (A universal mute/unmute button)

These are some basic requirements

Four Point Summary

1. soundOn = true/false

2. var audiotypes = { }

3. var sound1 = playAudio({
            if (audioOn) {
                    src: ["src/sound1.wav", "src/sound1.mp3"],
                    volume: 0.5
            }  
     });

4. function toggleSound() { }

Hope I’ve cleared goals or points, I'm trying to work on.

I'm working on 2-3 theme ideas , for which I need to control volume of background. I need to keep it low. One theme is mystic, for second theme I'm using music Love In the Park , working on third theme .

I'm using different sound effects for each theme along with different background music. To make sound effects effective background music must be in low volume.

I found some websites controlling background music volume & all are using greensock. All are using function to get audio file, control volume of background music, call audio of different action e.g. hover. May be some library they are using but I'm unable to find which one is.

Following is part of script from offfitalia
(you can check app.js)

Start of function

! function(e, n) {
    "use strict";
    var r = e.GreenSockGlobals = e.GreenSockGlobals || e;

Audio control part

 e.Common = function() {
        function t() {
            (0, o.default)(this, t), this.loader = new h.Loader("loader"), this.loaderInternal = new f.LoaderInternal("loader-internal"), this.videoTriggerSelector = "data-video-trigger", this.handleModal(), this.videoResize = this.videoResize.bind(this), this.handleVideoModal(), this.audioToggle = this.audioToggle.bind(this), this.isNotesReady = !1, !m.default.mqTo("desktop") && Modernizr.touchevents || (this.handleGlobalAudio(), this.handleNotes(), (0, d.default)({
                animationTime: 800,
                animationStep: 120,
                accelerationDelta: 50,
                accelerationMax: 1
            }))
        }
        return t.prototype.handleNotes = function() {
            var t = this;
            this.noteUrl = ["/assets/audio/Nota1.mp3", "/assets/audio/Nota2.mp3", "/assets/audio/Nota3.mp3", "/assets/audio/Nota4.mp3", "/assets/audio/Nota5.mp3", "/assets/audio/Nota6.mp3", "/assets/audio/Nota7.mp3", "/assets/audio/Nota8.mp3", "/assets/audio/Nota9.mp3", "/assets/audio/Nota10.mp3"], this.notesCount = this.noteUrl.length, this.notesPlayable = [], this.lastNoteIndex = -1;
            var e = 0;
            this.noteUrl.forEach(function(i) {
                var n = new Audio;
                n.src = i, n.addEventListener(m.default.events.CANPLAYTHROUGH, …

I found websites little similar with - what I'm trying to do.

offfitalia
20thcenturywomen

Background music
Sound on hover
volume indicator on/off (animated sound control bars)

Both have used greensock

Can anybody help me with using greensock?

I need some help to add few audio effects to website.

I found some examples like following,

audioOn: true

audio.muted = false

setAudioOn true    

 ref: "audio",
    attrs: {
      "id": "projects-audio"
    }
  }, [_c('source', {
    attrs: {
      "src": "/audio/click.mp3"
    }

     playAudio: function playAudio() {
        this.$parent.$refs.clickAudio.volume = 0.8;
        this.$parent.$refs.clickAudio.play();
    },

I need help to play audio using play() , control volume using volume = 1

What is workClick: ? I found it used with sound properties.

So, basic needs are play various sounds - on click, background music, control volume of background music, play sound on overlay appears

@both

Thanks

I'd be sticking with normalize.css.

Working on media queries to achieve clients needs

@rproffitt

Thanks

Got your point. I was checking design at mattkersley & Am I Responsive. I had some problems so I was looking for some accuracy.

BTW I’ve revised my code, please look at it.

::-moz-selection {
background: #c2c2c2;
color: #fff;
text-shadow: none;
}
::selection {
    background: #c2c2c2;
    color: #fff;
    text-shadow: none;
}
*, ::before, ::after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
*:focus {
    outline: none;
}
html, body {
    height: 100%;
}
html {
    line-height: 1.15; 
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
    word-wrap: break-word;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    font: inherit;
    line-height: 1.15;
    vertical-align: baseline;
    text-decoration: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
audio, video {
    display: inline-block;
}
hr {
    height: 0;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse; …

@rproffitt -

Need help to make responsive fonts for all devices.

@gentlemedia -

Would you like to help to reduce repeating porperties & make clean css reset?

I’ve tried various css reset including normalize.css. Each reset gives different result, not so big difference, but have something different from each other. So I'm trying to create little more accurate css reset for my project. Also I'm trying to add responsive font size for different viewport size.

Still need some help

@both
Thanks

I’ve created modified CSS reset based on various reset stylesheets available.
Need some help to make it effective & clean.

Need some help with typography

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    outline: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}
*:focus {
    outline: none;
}
::-moz-selection {
background: #ccc;
color: #fff;
}
::selection {
    background: #ccc;
    color: #fff;
}
html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
}
body, html {
    width: 100%;
    height: 100%
}
body {
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    line-height: 2;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}
hr {
    box-sizing: content-box;
    height: 0;
}
a {
    font-size: 100%;
    -webkit-transition: all .5s linear;
    -moz-transition: all .5s linear;
    -ms-transition: all .5s linear;
    -o-transition: all .5s linear;
    transition: all .5s linear;
    text-decoration: none;
    color: #000;
    outline: none;
    background-color: transparent;
}
a:hover, a:visited, a:active, a:focus {
    -webkit-transition: all .5s linear;
    -moz-transition: all .5s linear;
    -ms-transition: all .5s linear;
    -o-transition: all .5s linear;
    transition: all .5s linear;
    text-decoration: none;
    color: #000;
    outline: none;
}
a:focus, a:active, button::-moz-focus-inner, input[type='reset']::-moz-focus-inner, input[type='button']::-moz-focus-inner, input[type='submit']::-moz-focus-inner {
 border: 0;
 outline: 0;
}
abbr[title] {
    text-decoration: underline;
    text-decoration: underline dotted;
    border-bottom: none;
}
sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
}
sub {
    bottom: -.25em;
}
sup {
    top: -.5em;
}
button, input, optgroup, select, textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
}
button, select {
    text-transform: none;
}
button, hr, input …

@gentlemedia

Yes I have tried, but not working. I'hve created my function based on this, - tut

Please someone try my code with index.php, about.php & contact .php, to understand exact problem

index.php

<div class="page">
      <main>
        <ul class="nav">
          <li><a href="index.php">Home</a></li>
          <li><a href="about.php">About</a></li>
          <li><a href="contact.php">Contact</a></li>
        </ul>
        <div class="main-content">
          <h1>Home</h1>
        </div>
      </main>
      <div class="loader"></div>
    </div>

about.php

    <div class="page">
      <main>
        <ul class="nav">
          <li><a href="index.php">Home</a></li>
          <li><a href="about.php">About</a></li>
          <li><a href="contact.php">Contact</a></li>
        </ul>
        <div class="main-content">
          <h1>About</h1>
        </div>
      </main>
      <div class="loader"></div>
    </div>

Contact.php

    <div class="page">
      <main>
        <ul class="nav">
          <li><a href="index.php">Home</a></li>
          <li><a href="about.php">About</a></li>
          <li><a href="contact.php">Contact</a></li>
        </ul>
        <div class="main-content">
          <h1>Contact</h1>
        </div>
      </main>
      <div class="loader"></div>
    </div>

created function as follows, but not working correctly. need some help.

Please help
Thanks

jQuery(document).ready(function(event){ 

if(Modernizr.history){

    $('.nav li a').on('click', function(event){
        event.preventDefault();

        var url = $(this).attr('href');
        $('body').addClass('loading');      

        window.history.pushState(null, null, url);
        loadContent(url);   

    });    

    function loadContent(href){

        setTimeout(function(){
            $("main").load(href);   
            $('body').removeClass('loading');   
        }, 1200);   
    }

$(window).on('popstate', function() {
       url = location.pathname.replace(/^.*[\\\/]/, ''); //get filename only
       loadContent(url);
    });
}

})(jQuery); 

<div class="page">
  <main>
    <ul class="nav">
      <li><a href="index.php">Home</a></li>
      <li><a href="about.php">About</a></li>
      <li><a href="contact.php">Contact</a></li>
    </ul>
    <div class="main-content">
      <h1>Home</h1>
    </div>
  </main>

  <div class="loader"></div>
</div>

*, *::after, *::before {
    box-sizing: border-box;
}
html, body {
    height: 100%;
    line-height: 170%;
}
body {
    font-family: sans-serif;
    font-size: 14px;
    line-height: 1.5;
    font-style: normal;
    font-weight: 400;
    color: #fff;
    background: #000;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    margin: 0;
    padding: 0;
}
body::after, body::before {
    /* these are the 2 half blocks which cover the content once the animation is triggered */
    content: '';
    height: 50vh;
    width: 100%;
    position: fixed;
    left: 0;
    background-color: #ffffff;
    z-index: 1;
    /* Force Hardware Acceleration */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition: -webkit-transform 0.4s 0.4s;
    -moz-transition: -moz-transform 0.4s 0.4s;
    transition: transform 0.4s 0.4s;
}
body::before {
    top: 0;
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%);
}
body::after {
    bottom: 0;
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    -ms-transform: translateY(100%);
    -o-transform: translateY(100%);
    transform: translateY(100%);
}
body.loading::after, body.loading::before {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: -webkit-transform 0.4s 0s;
    -moz-transition: -moz-transform 0.4s 0s;
    transition: transform …